Practical 3: Ideation prototyping

Purpose: how to rapidly prototype

Due: Thursday Week 4

Part 1: Storyboarding and Design Problem

Part 2: Final Prototype

Paper prototypes for three versions of a home thermostat. From [Tohidi CHI2006]

Brief

This prac focuses on two rapid prototyping techniques that will help shape a design idea to a first draft of a user interface. Rapid prototyping addresses an important tension in design: forward momentum is essential, yet design excellence often requires exploring diverse ideas.

Aim: Create a high-level need/problem statement (point of view), flesh it out with storyboard scenarios, then choose a concrete direction and create some paper prototypes.

For this assignment, you will begin to work in teams: Each team member contributes to the ideation process: everyone will create ONE storyboard + ONE paper prototype

Assignment

Part 1: Developing a shared design problem

STEP 1: PROJECT BRIEF (Group Task) Your first step is to share your observations. Each group member should share:

· What brief did you choose?

· What activity (s)did you observe?

· What needs did you identify?

· What were some of the ideas you proposed to cater for these needs?

As a group decide what design concept sounds most interesting to you all.

Please don’t consider technical issues at this stage. Feasibility comes a little later.

Depending on your group experiences you may explore more than one idea at this stage or you can combine briefs.

STEP 2: POINT OF VIEW (Group Task)

Your next step is to write down a need or problem statement in a sentence or two.

· What's a need or problem statement? It's your take on a high-level design strategy, before designing a solution.

· For example, if you wanted to improve the check-out experience at a grocery store, your point of view might be: "waiting in line is intrinsic, but the boredom is not"

This would lead to design solutions like showing news or playing games while waiting in line.

Alternatively, your point of view might be "with a good scheduling interface, no one should have to wait in line". This might lead to better ways for employees to staff registers and consumers to pick them.

Or, you might have a different point of view: Let's make grocery stores more like farmers' markets, where payment is distributed across the stands that have the food.

These are valid needs or problem statements – they suggest different possibilities and have different implications/entailments for what constitutes a good design.

A good need or problem statement should:

· clearly express the problem/opportunity and

· make clear what a good solution would accomplish.

Coming up with a good need or problem statement that you can successfully tackle in the remaining weeks of the semester is crucial. If you have doubts – then discuss with the lecturer.

As a group, develop your need or problem statement. To do this……

· Review all the observations from Week 2.

· What are some of the user needs identified?

· What seems interesting to explore further?

· What point of view /need/ problem statement summarises the design problem your group will tackle?

Part 2: Rapidly prototype ideas

STEP 3: STORYBOARD SCENARIOS

Using a storyboard develop a user scenario that addresses/engages your point of view/need or problem statement.  

Each team member needs to develop their own storyboard based on their ideas.

· A storyboard is a comic-strip-like set of drawings about what your interface/design idea: what it does and how it is used to accomplish tasks in a real usage scenario.

· Check out the Guide to Storyboarding in Week 3 Learnline

· A good storyboard should clearly demonstrate who the user is, the usage situation, and the user's motivations for using the interface.

· It should show what the user can accomplish with your interface, but it needn't (and often shouldn't) show a specific user interface design.

 

This is a storyboard, which is a narrative, it is not the same as a user story

Each storyboard should require 5-8 panels, and should fit on one A3 sheet of paper.

· Use a thick pen

· Using a thick pen limits the amount of detail that you can add, forcing you to only draw the most important elements of scenario, user, and interface that communicate your ideas

· A thick pen is a good reminder to focus on the high-level and not the details at this point.

· Ensure you sign your storyboard.

External students – either use paper and photograph –or use an online storyboard tool. There are a range of free tools available: eg Canva https://canva.com or Pixton https://www.pixton.com/

STEP 4: PAPER PROTOTYPE

Decision time.

· Share your storyboards.

· With your team members, take some time to discuss the different ideas you've had.

· Make sure you discuss the strengths and weaknesses of each design, and how well they achieve the goals set out by your point of view.

As a team, decide which of the ideas from your group you want to take further.

EACH team member creates a paper prototypes (one each) that implements the idea you've decided on. (in this task you are exploring alternatives?)

· A paper prototype concretely shows all the elements of a user interface, except that it's implemented with pen on paper, as opposed to pixels and code.

· To learn how to do this, see the Snyder reading, in Learnline . See also http://paperprototyping.com/references.html for more references.

· Prototype interfaces must be hand-drawn, no computer. Again, it helps focus on the concepts, and saves you from wasting hours twiddling pixels.

 

The prototypes should vary in interface, but offer the same basic functionality.

· For example, if you were designing a mobile transit application, your two prototypes could display the bus times in two very different ways.

· The prototypes should be complete enough to "run" a new user through each task. When you're done, label the prototype you created. It’s important to show interaction flows

· Note: the explanation here is very linear, but your process doesn't have to be. You can start making a paper prototype, and then change your mind.

· Your prototype doesn't have to exactly align with your storyboard if your ideas have developed as a result of making the storyboard.

To summarise:

· Each group needs to have a single point of view which is then explored through storyboards. (one for each team member)

· One storyboard (or two) is then chosen by the group to explore further

· E ach person needs to create a paper prototype that reflects the chosen storyboard.

Research

· Explain how you work related to theory, or what you might change in your understanding of the theory now you have done this work, either how you prototype or why you do this and how you will use it

· Extended: Explain how you can use your prototypes to improve your design

Submit

Individual work with team Project Brief to be submitted to Learnline in Discussion link

One prototyping write up report on your onedrive/MSTeams directory submission per group.

The prototyping write up will include:

· Team members

· Design brief of the domain your group is exploring.

· What design problem, need, point of view your group has chosen.

· All individual Storyboards and paper prototype artefacts:

· Digital photos of your storyboards, which should be signed by you.

· Photos embedded in the file to upload

· Storyboards brought to class (internal)

· A set of digital photos of your paper prototypes, which should be signed by you

· Prototypes brought to class (internal)

· Photos to be part of the single submission document

Submit your individual digital resources via the Discussion submission link on Learnline. Ensure you clearly label your file with your team’s name.

Submit Team decisions to MSTeams or Onedrive as a record of your work for later submissions

,

Prac 4

Heuristic Evaluation

Introduction

Heuristic evaluation is…….( Some generic information about the process here – referenced!!)

This report provides the results of a heuristic evaluation of a paper prototype by XXXX of Y team. The paper prototype is for an application called “XY” which is designed to “ outline what the app is supposed to do’ [See appendix 1 for photos of the prototype parts provided for this evaluation, and a video of how this prototype works, provided by XXXX of y team]

This report will initially …. Explain what is in the report

Procedure

To evaluate the prototype, the Y team has outlined the use of the following heuristics: [List the heuristics provided by your team here],

As part of the evaluation, I am asking my peer to perform the following tasks: [Outline the tasks and explain the steps you will take to perform the heuristic evaluation]

1.

2.

3, etc

Videos of the prototype I want to have evaluated and the briefing I gave are here:

· Prototype walkthrough: Put the video of your walkthrough here

· Prototype facilitation: Put a video of your facilitation of your peer’s evaluation

Results of Expert Review

Refer to assessment task

The expert review on the paper prototype resulted in the following findings: –

Show your results in a radar chart (see https://support.office.com/en-us/article/Present-your-data-in-a-radar-chart-16e20279-eed4-43c2-9bf5-29ff9b10601d ) for details

What worked?

Major Problems:

Minor Problems:

Recommendations

What needs fixing?

Detailed Heuristic Evaluation – My response to my peers work

Violated Heuristic:	Frequency:	Persistence:	Impact:	Severity Rating (SR):
Prototype Screen shot	Description of Problem(s): ·
	User Comments: (explanation of problem)
	Ways to Rectify:
	Answers to Questions:

Sample Heuristic Evaluation with data

Violated Heuristic: Visibility LIST THE SPECIFIC ASPECT OF THE HEURISTIC HERE	Frequency: Often	Persistence: Throughout the prototype	Impact: Outline the impact	Severity Rating (SR): include an appropriate rating
Prototype Screenshot:	Description of Problem(s): · EG No time status on the processing screen. E.g. doesn’t inform the user the percentage/ time left of the processing. (SR – 2) ·
	User Impact (explanation how the problem will impact on users) · EG Slow users down as the users will become impatient when they have to wait without knowing the time status of the process
	Ways to Rectify: · Use a progress indicator e.g. percentage or time status · Provide an appropriate feedback about what the system is doing. E.g. instead of ‘Processing’ use ‘Processing rescheduled lunch’ · Use percentage indictor for zoom in and zoom out.
	Answers to Questions: HOW DOES THIS RELATE TO THE HEURISTIC ASPECT BEING EVALUATED · Users want to have time status visible without interrupting their other work

Reflection on HE process

Refer to assessment task

For the research section of the assessment there is as per previous submissions 20% each for

1. Theory: What sort of prototype are you making and what does this contribute to your design

2. Practical: What sort of tests will justify your assumptions about your design, maybe consider future tests with different hardware set up if relevant to your domain

Videos of my Facilitation Process

Mine

1. Facilitation Video – GOOD EXAMPLE: https://www.youtube.com/watch?v=-0Voru1Uwhs&list=UUFU6ls18ZslLsIjr-p3dwGg&index=1

2. Prototype Walkthrough: GOOD EXAMPLE https://www.youtube.com/watch?v=YyN2oGA1tCs&list=UUFU6ls18ZslLsIjr-p3dwGg&index=3

Prototypes

Attach images of your storyboard and paper prototypes, that are visible

References

include if you have referenced something in your write up.

Appendix 1: Client Prototype and videos

PAPER PROTOTYPE of XXXXX of TeamY

· Prototype Walkthrough: [link to video]

· Heuristic Briefing/Facilitation

Paper prototype pieces

Appendix 2

Client Heuristics

List the heuristics that you have been asked to use to analyse the paper prototype

5

image2.png

image3.png

image4.png

image5.png

image6.png

image1.gif

,

HCI. Assessment 2: Individual Report 2 Ethnographic Research

S123 HIT381 HUMAN-COMPUTER INTERACTION AND DESIGN

Individual Report 2 Ethnographic Research

Limin Ni

S264102

STEP 1: OBSERVE

Project Brief

The project aims to provide a convenient, easy-to-use and practical mobile application for users who like to grow flowers. The app will provide multiple functions to help users manage and care for their flowers and plants for better growth and maintenance.

Some activities which relate to my brief.

· Selection of flower varieties

· Plant flowers

· Fertilizing and watering

· Care for flowers

· Join the flower community.

Observe People

Person 1 (housewife)

Yesterday, I found that my aunt in her yard had some wrong behaviours with planting flowers. Among them, the most common problem is overwatering. She still insisted on watering the plants according to the original watering plan on wet or rainy days, which led to the plants being in a humid environment for a long time, causing root rot, leading to the death of the plants. Another common problem is lack of light. By placing pots in the shade of indoor corners or Windows, she ignores the plants' need for light, resulting in slow growth and even death. As well as her excessive fertilisation, resulting in the absorption of too many nutrients, fertiliser burning root situation, affecting the growth of flowers and plants health. And she pruned the flowers too much, resulting in the flowers cannot grow properly and lose beauty.

Person 2 （student）

I was standing by the window, watching a young student, about 17 years old, trying to plant a pot of green plants in the yard. The student carefully poured the soil into the pot, and then carefully transplanted the green plants into it. He put so much soil in the basin that it looked loose and not firm. This results in plants that cannot grow firmly and are easily blown over by the wind. He did not pay attention to the water quantity and frequency when watering; the water overflowed the basin bottom; he also did not pay attention to the smooth drainage hole; he lacked the necessary flower knowledge and experience.

Interview People

Interview subject: person 1: Yaya, a housewife who likes to grow flowers.

Interviewe r: Hello, Yaya. I am designing mobile software for plant flowers. Would you like to be interviewed by me?

Yaya : Well, I can do that.

Interviewer : Great, thank you. So, why did you start growing flowers? What does growing flowers mean to you?

Yaya: I started growing flowers because Growing flowers helps me feel more relaxed and in touch with my surroundings.

Interviewer: That's interesting. What kinds of flowers do you raise, and how did you choose them?

Yaya: I grow various flowers, such as roses, and cacti, mainly for their beauty. I choose them based on their colours and shapes and how they complement each other in my garden.

Interviewer : Have you encountered any difficulties while growing flowers, and how did you solve them?

Yaya: Yes, I have faced some challenges, such as improper watering, pests, and diseases. I rely on my experience in flower cultivation to solve these problems. However, sometimes I feel helpless when the issues are severe or require more knowledge than I possess.

Interviewer: can you tell me about how you take care of your plants? Any tips or experiences to share?

Yaya : Sure. I think it's important to control the amount of watering. Providing a suitable light.

Interviewer: Thank you for sharing that. How do you think growing flowers has affected your life?

Yaya: Growing flowers It's not just about adding beauty to my surroundings, but it's also a process of learning and growing.

Interviewer: Thank you for sharing your experiences with me, Yaya.

Interview subject: person 2: student

Interviewer: Hi, may I interview you about your experience planting green plants in the yard?

Student: Sure, I don't mind.

Interviewer: I noticed you were planting a pot of green plants earlier. Can you tell me a bit about the process?

Student: Yeah, I was trying to plant some green plants, but I'm not sure if I did it correctly.

Interviewer: Do you have any idea where you can find more information or resources to improve your skills?

Student: Actually, I'm not sure where to start. I've been trying to do some research online, but there's just so much information out there that it's hard to know what's reliable and what's not.

Interviewer: Do you have any idea how to solve these problems?

Student: No, I haven't thought about that.

Interviewer: Great, thanks for sharing your experience with me. Good luck with your future planting!

STEP 2: BRAINSTORM NEEDS

brainstorm user needs and goals.

Plant recognition: Using image recognition technology, users can obtain the basic information, maintenance methods and growth environment requirements of the plant by taking or uploading photos.

Feel frustrated if the app does not accurately identify the plant or if the information provided is confusing.

Feel grateful when they receive Accurate information

The user may think that they need to be able to identify plants for gardening or environmental purposes. Accurate information.

I need to identify a particular plant and learn more about it. Need explanations and reference materials."

User: Student

Take photos of plants and upload them to the app for identification. also use the app to search for specific plants and browse through the information provided.

I need to l