HCI Development Cycle
Design |
Evaluate |
Implement |
Ethnography |
Prototype |
Expert Evaluation |
Task Analysis |
GUI tools |
Usability testing |
Design Guidelines |
Scenarios |
This HCI development cycle involving (DESIGN -- EVALUATE -- IMPLEMENT) is an iterative process and should be used at every stage.
Evaluation methodologies
Expert: Inspection methods(Heuristic evaluation, cognitive walk-through), Models |
User testing: Qualitative methods(observation, interviews, questionnaires, think-aloud), Quantitative usability evaluation |
User testing is difficult than Expert evaluation
PACT
P(People)A(Activities)C(Context)T(Technologies) |
“People use technologies to undertake activities in contexts” (To understand how to
develop the best interfaces, we must understand people!)
Neilson's 10 Design Heuristic
Visibility of system status:The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. |
Match between system and the real world: The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. |
User control and freedom: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. |
Consistency and standards |
Error prevention |
Recognition rather than recall: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. |
Flexibility and efficiency of use: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. |
Aesthetic and minimalist design |
Help users recognize, diagnose, and recover from errors |
Help and Documentation |
QUOTE TO REMEMBER
Do everything possible to understand users(people). |
Interview(techniques)
Formerly structured,Semi-structured,Open-ended questions, Closed-ended questions, Grand tour questions |
Stakeholders
Primary |
Secondary |
Tertiary |
Facilitators |
Identify stakeholders for your system, so you know what to give more importance.
|
|
Neilson Quick Slogans
Your best is not good enough |
User is always right |
Users are not designers |
The user is not always right |
Designers are not users |
less is more |
Details matter |
Help does not |
Usability engineering is a process |
vice presidents are not users |
MVC Architecture
MVC divides application into:
- Model of core functionality and data
- Views displaying information to user
- Controllers handling user input
MVC Pros and Cons
Pros |
Cons |
Multiple views of same model |
Complexity for simple interactors |
Synchronized views |
Potentially excessive updates/messages |
Pluggable V & C and “look and feel” |
Tight coupling, in practice |
| |
Lack of portability |
| |
Some toolkits make MVC framework hard |
ICONS
Icons make use of three principle types of
representation:
-- Metaphor relies on people transferring knowledge from one
domain and applying to another
-- Direct mapping - creating a more or less direct image of
what the icon is intended to represent
-- Convention - arbitrary design, which has become accepted
as standing for what is intended over time
Norman's interaction framework
Gulf of execution: User’s formulation of actions |
Gulf of evaluation: User’s expectations about system state |
Horton’s checklist for icon designers
Understandable. Spontaneously suggest the intended concept to the viewer? |
Unambiguous. Are additional cues (label, other icons documentation) |
Informative. Why is the concept important? |
Attractive. Does the image use smooth edges and lines? |
Legible. Test all combinations of color and size? |
Types of Metaphors
Orientational |
Ontological |
Structural |
Metonymy |
eg: spinner controls and up voting |
eg: "kill the process" |
eg: file deletion is using trash can |
magnifying glass:For search |
Orientational:Gives a concept a spatial orientation
Ontological: Identifies an abstract system concept with a basic category of existence in the physical world: substance, object, container or entity
Structural: Identifies an abstract system concept with a detailed real world concept or object
Metonymy: use of the name of one thing for that of another of which it is an attribute or with which it is associated
|
|
'Understanding' before making the design
It is important to create personas and scenarios before you start designing. |
Personas: Fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users' needs, experiences, behaviours and goals. |
Scenarios:Stories(real-world experiences of people), Conceptual(abstract descriptions),Concrete(specific design decisions and tech. added), Use cases(formal descriptions that can be implemented) |
Gestalt Properties
The Gestalt theory is guided by 5 principles — Proximity, Similarity, Continuation, Closure, and Figure/Ground. |
Proximity: When an individual perceives an assortment of objects they perceive objects that are close to each other as related. |
Similarity: Elements can visually be grouped together if they have visual similarities. This can be applied in the form of color, shape, or iconography. |
Continuation: Continuity happens when the eye is guided to move from one object to another. |
Closure: Individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap. |
Figure/Ground: Refers to our ability to visually separate elements on different planes of focus. There are three ways to effectively execute this, of these through layering, contrast, and information hierarchy. |
Gestalt theories can be applied to UX design and If applied correctly, they can provide you with some quick wins out of the box.
Techniques and terminology
Ethnography , Interview , Questionnaire, Participatory design , Scenarios , Prototyping ,Probes , Card sorting , Focus groups |
Ethnograpthy: Ethnography, and other types of field studies, allow design teams access to the real-life environments of their end users. It allows designers insight into the tangible and technical and social environments of their users, as well as access to the tools users might already be using. |
Ethnography: As a methodology for UX design, it’s both about how people interact with technology, and also about how they describe their experience of interacting with their technology. |
Severity Ratings
- 0. No problem
- 1. Cosmetic problem
- 2. Minor – low priority
- 3. Major problem – high priority
- 4. Catastrophe – must fix
|
