Bùi Xuân Huy
Waterfall
Iterative
Spiral
…
Designing the User Interface
2
 Interface design is a part of software development
 The design process depends on the development process
 The design process is integrated with the development process
 Interface design is done at various stages of the project
 Waterfall
 Iterative
 Spiral
 ….
Designing the User Interface
3
 Functional Requirements: define specific behavior that the
system (interface of app , soft, web) should support
 Non-Functional
Requirements: specify overall criteria
governing the operation of the interactive system without being
tied to a specific action or behavior
 User
Experiement Requirements: explicitly specify nonfunctional requirements for the user interaction and user interface
of the interactive system (navigation, input, colors, etc.).
Designing the User Interface
4
Designing the User Interface
5
Designing the User Interface
6
Designing the User Interface
7
 the challenges posed by:
 physical, cognitive, perceptual, personality, and cultural differences
to user interface design
Designing the User Interface
8
 Variations in Physical Abilities
 Ergonomics
 there can be no image of an "average" user and compromises must
be made or multiple versions of a system must be constructed.
 Standard version vs variety version.
 Can you show some example???
 When a single design cannot accommodate a large fraction of the
population, multiple versions or adjustment controls are helpful.
 Customization tools of Windows
 Ease of Access Tools of Windows.
Personality Differences
 Personality Differences
 A clear understanding of personality and cognitive styles can be
helpful in designing interfaces for diverse communities of users
 One evident djfference is between men and women, but no clear
pattern of gender-related preferences in interfaces has been
documented.  user psychology research
 Cultural and International Diversity
 Internationalization (i18n): The process of making software ready for
translation or adaptation into different languages and cultures.
 Localization: The process making software to a specific language and
culture.
 More than just translate, find, and replace words
CULTURAL AND INTERNATIONAL DIVERSITY
 Problem of translation:
 All user-visible text has to be
translated, including:
 Error messages
 Text in code
 Text in images
 Text in data files
 Translation results in the change
of text length
CULTURAL AND INTERNATIONAL DIVERSITY
 Problem of Text Direction:
 Left-to-right
 English, Vietnamese, French, etc.
 Right-to-left
 Arabic, Hebrew
 Top-down, left-to-right, right-to-left
 Chinese, Korean, Japanese
 Text direction affects drawing,
screen layout, editing…
CULTURAL AND INTERNATIONAL DIVERSITY
 Problem of Format:
 Numbers
 US/UK: 1,000.5 (one thousand point five)
 Vietnam, Germany: 1.000,5
 France: 1 000,5
 Date
 US: 5/10/2012 (M/D/Y)
 VN and others: 10/5/2012 (D/M/Y)
 Time
 US: 12:30 PM (H:M)
 VN: 12.30 chiều
CULTURAL AND INTERNATIONAL DIVERSITY
 Color Convention:
vs
vs
and so on…
CULTURAL AND INTERNATIONAL DIVERSITY
 Icon:
 Others
 Users with Disabilities
 TCVN 9249:2012
 WCAG 2.0 (ISO/IEC 40500)
 The preliminary design is also known as architectural design or
conceptual design. Such as :
 Interface displays.
 Navigation mechanisms,
 Design response styles for actions.
 Review, and edit specifications for designs
 Evaluation of prototypes, pilot tests
 Integrated with other apps or not,
Designing the User Interface
19
 Adobe XD, Figma…
 Programing languages (C++, JAV, PHP….)
 Platforms (PC, Mobile, Web, kết hợp đa nền tảng)
Designing the User Interface
20
 test and validate the system implementation to ensure that it
conforms to the requirements
 Kiểm thử UAT : User Acceptant Testing.
 Chấp nhận về chức năng
 CHấp nhận về giao diện
Designing the User Interface
21
 Determine the type of user
 The user's skill level
 New users (novice/first-time users)
 Knowledgeable intermittent users / người dung có hiểu biết nhất định
 Users are experts, use frequently (experts and frequent users)
 Physical, cognitive, perceptual, personality, and cultural differences
 Define tasks
 Identify frequently performed tasks
 Less frequent tasks
 Very little/rarely performed tasks
Designing the User Interface
22
 Choose the right type of interaction
 Direct manipulation
 Menu selection
 Fill in the data in the form
 Command line language
 Natural language
 Exercise:
 Show us example about type of interaction in any system.
Designing the User Interface
23
 Schneiderman's 8 golden principles
 1. Strive for Consistency
• Consistent sequences of actions
 2. Enable Frequents users to use shortcuts
 3. Offer informative Feedback
• For every action there should be feedback
 4. Design dialog yield to closure
• Sequences of actions should be divided into groups with a
beginning. middle. end.
Designing the User Interface
24
 Schneiderman's 8 golden principles
 5. Offer simple error handling
• Design system so user can't make serious errors
 6. Permit easy reversal of actions
 7. Support Internal Locus of control
• The user should feel like they're in control
 8. Reduce short-term memory load
• Keep display simple and visible
Designing the User Interface
25
Designing the User Interface
26
 Show us some example about any system which take / or not take
Schneiderman's 8 golden rules
Designing the User Interface
27
 Scenario development and storyboarding
 Prototyping
Designing the User Interface
28
 Scenario development builds on the use case concept and allows
for developing specific scenarios when a user engages the
interactive system to solve a particular task.
 Storyboarding is the use of graphical sketches and illustrations to
convey important steps in a scenario
Designing the User Interface
29
 Low-fidelity prototypes are generally created by sketching,
using sticky notes, or cutting and gluing pieces of paper together
(paper mockups);
 Medium-fidelity prototypes are often called wireframe, provide
some standardized elements (such as buttons, menus, and text
fields), even if potentially drawn in a sketchy fashion, and have
some basic navigation functionality;
 High-fidelity prototypes look almost like the final product and
may have some rudimentary computational capabi lities; however,
the prototype is typically not complete and may 11ot be fully
functional.
Designing the User Interface
30
Designing the User Interface
31
 All thing you only need:
 Paper
 Power Point
 Adobe XDDesign
 Goole Design
 Figma
…
Designing the User Interface
32
 Are guidelines and principles to follow in accordance with general
standards and orientations.
 Used by interface designers, programmers and testers.
 “Guideline is a visual language for communicating design goals
within the team, it is important to make sure everyone can
understand and implement its use “ (Yuki Gu)
Designing the User Interface
33
Designing the User Interface
34
Designing the User Interface
35
 The reason guidelines are used to define and follow in the UX
design process:
 They create consistency in the design of your entire product.
 Behind the specifications of the UI elements, the guidelines also
describe best solution. It makes it easy for the reader to make the right
decision.
 They make research easier. ‘Rookie’ will be given simple instructions on
standards and behaviors.
 Designers don't have to create specifications every time they design a
special object.
 Developers don't waste time on specs, they can refer to guidelines and
interface builder.
 Conveniently update guidelines based on new standards and trends,
making your designs more relevant.
Designing the User Interface
36
 The design guideline needs both of pictures and explanations
because:
 You understand and your stakeholders also need to understand.
 Your team members
 Developers
 Your customers
 Your successors
 Example: (Link)
Designing the User Interface
37
 Come from Begin (simple) to End (detail) of a Design Process
(become detailing)
Designing the User Interface
38
Designing the User Interface
39