Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
-
Upload
preston-hart -
Category
Documents
-
view
213 -
download
0
Transcript of Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
![Page 1: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/1.jpg)
Yonglei TaoYonglei TaoSchool of Computing & Info School of Computing & Info
SystemsSystemsGVSUGVSU
Ch 7 Design Guidelines
![Page 2: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/2.jpg)
GuidelinesGuidelines
1. Help the user build and use a workable mental model
2. Minimize modal interaction3. Reduce the cognitive workload
of the user4. Let the user be in charge
1-2
![Page 3: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/3.jpg)
Guideline 1Guideline 1Help the user build and use a
workable mental model◦Consistent with the intended tasks◦Consistent representations◦Use concrete and familiar ideas for
metaphors◦Use the user’s language◦Guide new users through normal and
reasonable patterns of usage◦Provide feedback
1-3
![Page 4: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/4.jpg)
4
ConsistencyConsistencyFunctional consistency
◦ The same action should have the same result regardless of the mode the application is in
Consistent appearance/behavior◦ comparable operations should be
expressed in the same wayConsistency within and among
applications
![Page 5: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/5.jpg)
BenefitsBenefitsPredictable in appearance and
behavior throughout the application’s display of information, manner of manipulating information, and methods of navigation
Facilitating user’s learning◦ Result in great productivity and efficiency
Reusable design◦ Increase productivity and product quality
1-5
![Page 6: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/6.jpg)
6
Consistent Appearance Consistent Appearance and Behaviorand Behavior
![Page 7: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/7.jpg)
7
User FamiliarityUser Familiarity Do not force users to adapt to an
interface just because it is convenient to implement◦ Use terms and concepts from the
experience of users◦ Hide the underlying implementation of
interfaces (such as files and data structures)
Consistency with the real world◦ base interface design on a real-world
metaphor
![Page 8: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/8.jpg)
8
Minimal SurpriseMinimal Surprise Users get irritated when a system
behaves in an unexpected way Need to ensure that comparable
actions have comparable effects Users become confused or panic if no
response to their actions from the system
![Page 9: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/9.jpg)
Guideline 2Guideline 2Minimize modal interactionVisibility
1-9
![Page 10: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/10.jpg)
VisibilityVisibilityMaking the user aware of the system’s
components and processes, including all possible functionality and feedback from user actions.◦ Reduce memory load
Recognition/Recall◦ the principle of visibility is based on the fact that we
are better at recognition than we are at recall
1-10
Show everything at once, and the result is
chaos.
Don’t show everything, and then stuff gets lost.
(Norman, 1998, 74)
![Page 11: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/11.jpg)
11
Can You Tell between Edit Can You Tell between Edit and Preview ?and Preview ?
![Page 12: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/12.jpg)
12
Excel ModeExcel Mode
![Page 13: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/13.jpg)
13
Excel Mode (Cont.)Excel Mode (Cont.)
![Page 14: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/14.jpg)
Mode of a Mobile Phone Mode of a Mobile Phone
1-14
![Page 15: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/15.jpg)
Guideline 3Guideline 3Reduce the cognitive workload of
the user◦Present options clearly and explicitly
without multiple, reasonable interpretations
◦Reduce the number of cognitive transformations or translations from the interface to the user’s mental model
1-15
![Page 16: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/16.jpg)
16
ClarityClarity
Visual clarity◦ graphical representations can be clearly
identified Conceptual clarity
◦ behavior of control is clear◦ the metaphor is easily recognized
Linguistic clarity◦ meaning of labels and static text clarify
contents
![Page 17: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/17.jpg)
17
Visual ClarityVisual Clarity
![Page 18: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/18.jpg)
Reduce the User’s Info Reduce the User’s Info LoadLoadUsers should not be required to
remember information from one screen for use on another screen.
Tasks should be arranged such that completion occurs with few actions, minimizing the chance of forgetting to perform a step.
1-18
![Page 19: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/19.jpg)
Common TechniquesCommon TechniquesRecognition, rather than recallAllow users to perform actions by
choosing alternatives presented on the screen, as opposed to remember particular command or name
Build on user's frame of reference Labels and common formats should be
provided for users
1-19
![Page 20: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/20.jpg)
Techniques - SimplicityTechniques - Simplicity
Simple things are easy to understand and, therefore, easy to learn and remember
◦ 80/20 Rule - 80% of an application’s usage involves 20% of its functionality
◦ Combines the conflicting needs of finding the optimal solution that satisfies all the requirements
1-20
![Page 21: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/21.jpg)
1-21
ExampleExample
![Page 22: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/22.jpg)
1-22
ExampleExample
![Page 23: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/23.jpg)
Techniques - Progressive Disclosure
1-23
![Page 24: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/24.jpg)
ConstraintsConstraints
Limiting the actions that can be performed in a particular design
Controls the design’s simplicity
1-24
![Page 25: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/25.jpg)
Guideline 4Guideline 4Let the user be in charge
◦Allow users to accomplish tasks directly
◦Allow users to try again◦Provide appropriate feedback to
users
1-25
![Page 26: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/26.jpg)
26
Make the Interface Make the Interface ForgivingForgiving
Users inevitably make mistakes when using a system
Users should be able to explore without fear of causing an irreversible mistake◦ Prevention◦ Toleration◦ Recovery
![Page 27: Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.](https://reader035.fdocuments.us/reader035/viewer/2022070413/5697bff81a28abf838cbf54d/html5/thumbnails/27.jpg)
Common TechniquesCommon TechniquesAllow the user to select instead of
typingDisable improper menu items or
buttons by graying the option Confirm destructive actions or actions
that result in an unexpected loss of user info (such as Cancel, OK command buttons)
Provide undo and redo facilities
1-27