Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.
-
Upload
clyde-robertson -
Category
Documents
-
view
212 -
download
0
Transcript of Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.
![Page 1: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/1.jpg)
Ch 5 DesignCh 5 Design
Yonglei TaoSchool of Computing and Info SystemsGVSU
![Page 2: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/2.jpg)
2
DesignDesignConceptual DesignPhysical DesignEvaluation Techniques
![Page 3: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/3.jpg)
3
Tools for Conceptual Tools for Conceptual DesignDesignBrainstormingCard sortSemantic networksPersonasScenariosFlowcharts
![Page 4: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/4.jpg)
4
BrainstormingBrainstormingTeam activity
◦Paper and pencil drawings, blackboards, whiteboards, and Post-it notes
Generate as many ideas as possible
Be as creative as possible without restrictions on the process or ideas
![Page 5: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/5.jpg)
5
Card SortCard SortOrganize the information
collected in the discovery phaseDefine groupings for menus,
controls and Web page contentGenerate labels for menus,
buttons and navigation links
![Page 6: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/6.jpg)
6
Example of Card SortExample of Card Sort
![Page 7: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/7.jpg)
7
Semantic NetworkSemantic Network
![Page 8: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/8.jpg)
8
PersonasPersonasIdentify primary stakeholders and
create a description about them ◦based on stakeholder profiles and
other activities such as interviews and surveys
Complete as many personally identifying attributes as necessary
![Page 9: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/9.jpg)
Example: a Website Example: a Website ProjectProjectDevelop a website for a poetry journal
called Circumference◦ Serve international audience◦ Also enable disabled users to access
The journal is specialized in world poetry translation into English ◦ to date it has four published issues
Stakeholders◦ Site visitors, journal editors, and site
developers
![Page 10: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/10.jpg)
Example of PersonaExample of Persona
![Page 11: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/11.jpg)
11
ScenariosScenarios A description of a typical task
◦ Basic goal ◦ Conditions that exist at the beginning
of the task◦ Activities in which the persona will
engage◦ Outcomes of those activities
![Page 12: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/12.jpg)
Example of ScenariosExample of Scenarios
Read poems from multiple issuesRead poems of an authorView videos of the last two
poetry eventsOrder one-year subscription,
issue number 4, and issue number 1
![Page 13: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/13.jpg)
Example of a ScenarioExample of a ScenarioThe first thing I would do is to observe cars on the road and identify ones that I like the look of. This may take some weeks. I would also try to identify any consumer reports that will include an assessment of car performance. Hopefully, these initial activities will result in my identifying a likely car to buy. The next stage will be to visit a car showroom and see at first hand what the car looks like, and how comfortable it is to sit in. if I still feel positive about the car, then I’ll ask for a test drive. Even a short test drive helps me to understand how well the car handles, how noisy is the engine, how smooth are the gear changes, and so on. Once I’ve driven the car myself, I can usually tell whether I would like to own it or not.
![Page 14: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/14.jpg)
Example: One-Stop Car Example: One-Stop Car ShopShopI want to buy a new car, so I go down the street to the local ‘one-stop car shop.’ The shop has a number of booths in it, and when I go in I’m directed to an empty booth. Inside there’s a large seat that reminds me of a racing car seat, and in front of that a large display screen, keyboard, and printer. As I sit down, the display jumps into life. It offers me the options of browsing through video clips of new cars which have been released in the last two years, or of searching through video clips of cars by make, by model, or by year. I can choose as many of these as I like.
![Page 15: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/15.jpg)
I also have the option of searching through and reading or printing consumer reports that have been produced about the cars I’m interested in. I spend about an hour looking through materials and deciding that I’d like to experience a couple that look promising. I can of course go away and come back later, but I’d like to have a go with some of those I’ve found. By flicking a switch in my armrest, I can call up the options for virtual reality simulations for any of the cars I’m interested in. These are really great as they allow me to take the car for a test drive, simulating everything about the driving experience in this car, from road holding, to widescreen display, and front pedal pressure to dashboard layout. It even recreates the atmosphere of being inside the car.
![Page 16: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/16.jpg)
StoryboardsStoryboardsOften used with scenarios, bring
more detailIt is a series of sketches showing
how a user might progress through a task using the device
Used early in design
![Page 17: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/17.jpg)
Storyboard for the One-Stop Storyboard for the One-Stop Shop Scenario Shop Scenario
![Page 18: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/18.jpg)
18
FlowchartsFlowcharts Simple network diagrams Sophisticated diagrams
![Page 19: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/19.jpg)
19
Physical DesignPhysical Design
Considerations◦What it will look like◦What components it will require◦How the screens will be laid out
Tools◦Low-fidelity prototypes◦High-fidelity prototypes◦Wireframes◦Functional prototypes
![Page 20: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/20.jpg)
20
What to What to Prototype?Prototype?
• Technical issues• Work flow, task design• Screen layouts and information
display• Difficult, controversial, critical
areas
![Page 21: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/21.jpg)
21
Types of PrototypesTypes of Prototypes
Horizontal and Vertical
![Page 22: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/22.jpg)
22
Low-Fidelity Low-Fidelity PrototypingPrototyping
• Uses a medium which is unlike the final medium, e.g. paper, cardboard• Quick, cheap and easily changed
• Examples• Sketches of screens, task
sequences …• ‘Post-it’ notes• Storyboards• ‘Wizard-of-Oz’
![Page 23: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/23.jpg)
Low-Fidelity PrototypesLow-Fidelity Prototypes
23
![Page 24: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/24.jpg)
Card-based prototypesCard-based prototypes
• Index cards (3 X 5 inches) • Each card represents one screen or
part of screen• Often used in website development
![Page 25: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/25.jpg)
Example of PrototypeExample of Prototype
![Page 26: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/26.jpg)
‘‘Wizard-of-Oz’ Wizard-of-Oz’ PrototypingPrototyping• The user thinks they are interacting with a
computer, but a developer is responding to output rather than the system.
• Usually done early in design to understand users’ expectations
>Blurb blurb>Do this>Why?
User
![Page 27: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/27.jpg)
28
Low-Fidelity PrototypesLow-Fidelity Prototypes
Need to answer questions before getting started◦What feedback do you need?◦How much of the design should you
prototype?◦Should you cover any area in great
detail?Help define the scope of the prototype
and focus on what you want to accomplish
![Page 28: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/28.jpg)
29
High-Fidelity High-Fidelity PrototypingPrototyping•Use materials that you would expect
to be in the final product
•Prototype looks more like the final
system
•Danger that users think they have a
full system
![Page 29: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/29.jpg)
High-Fidelity PrototypingHigh-Fidelity Prototyping
Menus
Drop-down lists
Message boxes
![Page 30: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/30.jpg)
31
Functional PrototypesFunctional Prototypes
Interactive prototypes that represent various degrees of functionality
Can be created using tools such as:◦ VC++, VB, NetBeans◦ Adobe - Flash, Dreamweaver, and Director
Rapid Prototyping◦ Make it possible to try out ideas very early◦ Make it possible to test, revise, test, revise,
…◦ Engage end users
![Page 31: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/31.jpg)
1-32
EvaluationEvaluation
An integral part of the development process
Inspection techniques Walkthrough, heuristic evaluation
Alternative to usability testingAllowing to begin evaluations early in
the process
![Page 32: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/32.jpg)
1-33
Cognitive WalkthroughsCognitive WalkthroughsAn evaluator follows task scenarios using the flowcharts or the low-fidelity prototypes
Role-plays the part of a user working with the interface and tries to accomplish user tasks
◦ Identify the user's goals for each task
◦ Act as if the interface was actually built
◦ Walk through each task
Suitable for the early stages of development
![Page 33: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/33.jpg)
Example of Cognitive Example of Cognitive WalkthroughsWalkthroughs
![Page 34: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/34.jpg)
Example of Cognitive Example of Cognitive WalkthroughsWalkthroughs
![Page 35: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/35.jpg)
A Scenario – Read Poems A Scenario – Read Poems from Multiple Issuesfrom Multiple Issues
1. From the Home page, click on the Issues link
2. From the Issues page, decide on an issue to look at
3. Click on the appropriate issue link4. Scan the TOC for a poem5. Click on the poem’s link6. Read the poem7. Click on the global Issues link 8. Repeat steps 2-6
![Page 36: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/36.jpg)
Cognitive WalkthroughsCognitive WalkthroughsQuestions to ask at each step
◦ Will users know what to do?◦ Will users see how to do?◦ Will users understand from feedback
whether the action was correct or not?Perform group walkthrough
◦ May involve users, developers, and usability experts
◦ Step through a task scenario
◦ Discuss and evaluate each user interface element
![Page 37: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/37.jpg)
Heuristic EvaluationHeuristic Evaluation
Experts go through an interface and evaluate each element against a list of principles◦ Several experts evaluate on their own
◦ Follow a scenario through the design
◦ Look at design and implementation
◦ Compare findings and provide feedback
◦ Make recommendations to the design team Can be used at any time in the
development process
1-38
![Page 38: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/38.jpg)
Empirical DataEmpirical DataFactor 1: Visibility of system status
◦ Feedback: keep user informed about what goes on◦ Provide status information ◦ Feedback: show that input has been received ◦ Features change as user carries out task ◦ Feedback provided for all actions ◦ Feedback timely and accurate ◦ Indicate progress in task performance ◦ Direct manipulation: visible objects, visible results ◦ Identity cues system response vs. user’s goals ◦ Show icons and other visual indicators ◦ WYSIWYG: do not hide features ◦ What incorrect inferences are most likely
![Page 39: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/39.jpg)
Empirical Data (Cont.)Empirical Data (Cont.)Factor 2: Match between system and real
world◦ Speak the user’s language ◦ Contains familiar terms and natural language◦ Speak the user’s language◦ Metaphors from the real world◦ Familiar user’s conceptual model◦ Use of user’s background knowledge◦ Learnable through natural, conceptual model◦ Follow real-world conventions◦ Screen representation matches non-computer◦ Encourage users to import pre-existing tasks◦ Identity cues between actions and user’s goals◦ Understand the user’s language
![Page 40: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/40.jpg)
Empirical Data (Cont.)Empirical Data (Cont.)Factor 3: User control and freedom Undo and redo should be supported Obvious way to undo actions Forgiveness: make actions reversible Ability to undo prior commands Clearly marked exits Ability to re-order or cancel tasks Modeless interaction User control: allow user to initiate/control actions Modelessness: allow users to do what they want
![Page 41: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/41.jpg)
Empirical Data (Cont.)Empirical Data (Cont.)Factor 4: Consistency and standards
◦ Consistency: express same thing same way◦ Consistency: same things look the same◦ Uniform command syntax◦ Conform to platform interface conventions◦ Consistent key definitions throughout◦ Universal commands: a few, generic commands◦ Show similar info at same place on each screen
![Page 42: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/42.jpg)
Empirical Data (Cont.)Empirical Data (Cont.)Factor 5: Error prevention
◦ Prevent errors from occurring in the first place◦ System designed to prevent errors◦ Understand the user’s language◦ What planning mistakes are most likely?◦ What slips are most likely?◦ Identity cues between actions and user’s goals
![Page 43: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/43.jpg)
Empirical Data (Cont.)Empirical Data (Cont.)Factor 6: Recognition rather than recall
◦ See-and-point instead of remember-and-type◦ Make the repertoire of available actions salient◦ Seeing and pointing: objects and actions visible◦ What features often missed and at what cost?◦ Provide lists of choices and picking from lists◦ Minimize the users’ memory load◦ Direct manipulation: visible objects, visible results◦ Easy or difficult to perform (execute) task?◦ Evoke goals in the user◦ Clearly marked exits◦ Show icons and other visual indicators◦ Integrated with the rest of the desktop
![Page 44: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/44.jpg)
Empirical Data (Cont.)Empirical Data (Cont.)Factor 7: Flexibility and efficiency of use
◦ Accelerators should be provided◦ Shortcuts: Accelerators to speed up dialogue◦ User tailorability to speed up frequent actions◦ User control: allow user to initiate/control actions◦ System should be efficient to use◦ User interface should be customizable◦ Ability to re-order or cancel tasks◦ Keyboard core functions should be supported◦ Physical interaction with system feels natural
![Page 45: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/45.jpg)
Other HeuristicsOther HeuristicsAesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, concrete steps to be carried out, and not be too large.
![Page 46: Ch 5 Design Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022070413/5697bfd91a28abf838cafc0b/html5/thumbnails/46.jpg)
47
Interface Design Interface Design StandardsStandards
Promote standards-based designs with a consistent look and feel◦Graphical libraries◦User interface toolkits◦Visual interface builders◦Web development tools
Increase efficiency and promote learning