Design Framework and Protoyping
1
Today’s lecture
• Design Framework
• From Personas to Context Scenarios to Interaction
Scenarios
• Paper and digital prototyping
• Information architecture and card sorting • Quiz
Interface Hall of Fame or Shame?
Start to submit these to my email with the subject “Interface Hall of Fame or Shame” and I’ll pick one for each lecture to discuss.
Interface Hall of Fame or Shame?
From someone’s LinkedIn post
Interface Hall of Fame or Shame?
By Edward Holt
Interface Hall of Fame or Shame?
Working with Personas
From someone’s LinkedIn post
A picture from Flora’s roundtable to discuss how to increase vehicle occupancy. Government, academia, and industry consortium partners collaboratively workshop the ideas and solutions for Transport of Tomorrow during the iMove CRC Symposium (26-27 March 2019, MCG).
Shown here is the personas of Bob and Gary, prepared by UX consultants from Arup.
Previously, before the personas are shown, the discussion was very much more on the engineering and the solutions.
But once the personas are used, the solutions become much more contextualised and the users and their problems, not the technology, become the focus of the discussion. Tech becomes the enabler of the solutions.
Design Framework
8
The Design Framework
• Now we can start designing on a high level.
• Consists of
– Interaction Framework (Our focus here) – Visual Design Framework
– Industrial Design Framework
Why scenarios are important?
• End-to-end experience
• Changes over time
• Design consideration
• Real-world situations and contexts
Scenarios
• To adapt and complement user requirements from the planning document
• Defining the interaction framework (that is, to design) • Uses the persona as the main character.
• Focuses on the story of the persona. • Keep details to a minimum.
Constructing Scenarios
• Most story-like scenario
• The design begins here
• However this should be textual, that is not in a design form • “High level actions from the user’s perspective”
• Primary points of contact that the user has with the system.
Constructing Scenarios
• Remember, we are talking about ideal user experience.
• So create a story where the persona is able to achieve his
or her goals by using your system.
• The story should have a beginning that provides the framework for the narrative.
• It must also have an ending where the goal is achieved.
Example scenarios (healthy food app)
•Susan is at home. She’s looking through her cupboards and trying to locate items for a chosen recipe.
•Susan is at the park with her children. She wants to find a lasagne recipe to cook for dinner.
•Susan is talking on her smartphone with a friend about a recipe for a low-fat casserole. She wants to send this recipe to her friend.
•Susan is out shopping and wants to locate a particular spice that’s used in a recipe she’s found.
Scenario based approach
Context scenarios
Start with Personas
Lynn – “I want to effectively manage and monitor my family chores” Background
• A Mom
• Like to live sustainably and hate printing paper
Needs and Goals
• An easy way to set up and manage chores
• A quick way to check if a chore is done
• Wants to replace the current chore reminder paper system on her fridge Skills and Experience
• Fairly tech savvy
• She and most of her family members have multiple digital devices
Context scenarios
• Narrative
• Describe the contexts and settings of the
application
– While being used by the persona to fulfil the needs and complete the tasks.
Context scenarios
It’s the beginning of the week again, and Lynn needs to set up her family and chore charts to ensure the family home is kept clean. As she looks around the house, she starts noticing things to that require attention. She enters new chores using her tablet, and assigns them to her family members. While she’s on the app, she can’t help to notice that Zach has not completed one of his chore last week. She sends him a reminder. Apart from it, she’s happy to learn that most chores are completed ahead of time. As Lynn closes the app, she starts thinking of special rewards for Zach and Justin.
Functional and data needs
• Data needs – basic units of data. What goes into the database
– Example: name, id, username, address etc.
• Functional needs – basic units of functionality.
– Example: loading file, browsing file structure, saving username
Example – data needs
Lynn’s data needs: -Individual kid’s chores -Chore completion status -Individual kid allowance -Reward goals
Example – functional needs
Lynn needs the ability to: -Create new chores
-Schedule chores
-Create accounts for each child -Create new reward goals -Delete reward goals
-Remove chores
Define user experience requirements
Key Path Scenarios
Construct key path scenarios
• Flows from the context scenario, driven by the persona’s needs.
• Details two things: The persona’s input into the system and the system’s reaction to the input.
• Could be storyboard sketching.
• Pathways through the application – focus on tasks
Form factor
• The form by which the system or application is available to the user.
• Type of platform, what resolution. – Example, iPhone 5S – 640×1136
Posture
• The attitude the application presents to the user. • Casual, professional, transient?
• Think the vibe and feel.
Input Methods
• The means by which the user interacts with the application.
– Keyboard and Mouse
– Voice
– Touch and swipe
– Fumble around making polite suggestions at the creator (Myki) – Gestures
Functional elements
Functional groups
• Consider:
• Real estate requirements • Container elements
• Proximity (recall this?)
• Optimising flow
• Other design principles.
Functional groups
Sketch interaction framework
• Label and describe
• Low fidelity sketches of rectangles which are: – panes
– control components
• Use interaction arrows.
Sketch interaction framework
Sketch interaction framework
Sketch interaction framework
Validation Scenarios
• What if set ups
• Trying to find problems with the design • Alternate key path scenarios
• Necessary use scenarios
• Edge case scenarios
Storyboarding
(part of design documentation)
37
Storyboard
• A comic-strip-like set of drawings about what your interface does and how it is used to accomplish tasks in a real usage
scenario.
• Is not the same as interaction framework in key path
scenarios
38
Storyboard
http://spark-public.s3.amazonaws.com/hci/assignment_ressources/assignment3_storyboard_notes.pdf
39
Amal Dar Aziz’s guide to Storyboarding
40
Amal Dar Aziz’s guide to Storyboarding
41
Amal Dar Aziz’s guide to Storyboarding
42
Storyboarding
• Setting
• People involved?
• Environment?
• Task being accomplished?
• Sequence
• What steps are involved?
• What leads someone to use the app? • What task is being illustrated?
• Satisfaction
• What’s the motivation for the user? • What’s the end result?
• What need are you “satisfying”?
43
Work/Dataflow diagrams
44
Documenting Workflow Models
• Creating diagrams and charts for your task. • Many ways to do this:
–1) Mental models
–2) Mind mapping
–3) Mapping user action flows.
Mental models
• Mental representation of how something works in the real world
• e.g. checkout process on a shopping website
Mental Models
• A mental model is based on belief, not facts
• Individual users each have their own mental model.
• Mental models are in flux, due to stimuli, experience with the system, learning
• https://www.nngroup.com/articles/mental-models/
RMIT University©2013 CS&IT 47
Mind map
• Wikipedia
Mapping user actions
Documenting Workflow Models
• Can be simple or as complex as required. • Helps you visualize the task steps.
Information Architecture
IA: Structural design of shared information environments
Timothy Greig, http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
Information Architecture
Common questions
•What is the flow of users through our site?
•How does the application help the user catalogue their information?
•How is that information presented back to the user? •Is that information helping the customer, and driving
decisions?
3 things to focus on: the target audience, the technologies, and the data
Card sorting
• Information Architecture: what goes in where?
• Classic mistake: to structure the information space based
on how you view the content
• Enhance usability by: creating an information architecture
that reflects how users view the content https://www.youtube.com/watch?v=-89cj71-Vfg
Card sorting – How?
1. Write the name of each of the main items on an index card
2. Shuffle the cards and give the deck to a user.
3. Ask each user to sort the cards into piles, placing items that belong together in the same pile. Users can make as many or as few piles as they want.
4. Optional extra steps include asking users to arrange the resulting piles into bigger groups, and to name the different groups and piles. To give ideas for words and synonyms to use for navigation labels, links, headlines, search engine optimization.
https://www.nngroup.com/articles/card-sorting-how-many-users-to-test/
Card sorting – How many users?
• For most usability studies, Nielsen recommends testing 5 users (https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/), see lecture slides week 5
• But Tullis and Wood’s study on card sorting recommends 20-30 users (http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.514.3907)
• Based on Tullis and Wood’s study, Nielsen suggests it should be 15 users (https://www.nngroup.com/articles/card-sorting-how-many-users-to-test/ )
55