USER INTERFACE
DESIGN
PRINCIPLES and
USABILITY
LESSON 02
TOPICS
❖ Factors to consider in UI Design
❖Guidelines for user-friendly interface
❖User frustration
❖Interface Design Principles
CS 411-Human Computer Interaction
USER INTERFACE DESIGN
If screens are
confusing or
product is
difficult to use
software product
will not be used!
CS 411-Human Computer Interaction
WHICH ONE DO YOU PREFER?
CS 411-Human Computer Interaction
Factors to Consider in User
Interface Design
1. Goal-focused design
2. Human-oriented design
3. Inter-cultural design
4. Use of negative space
5. Colors transfer meaning
6. Placement and length of content
7. Templates: to use or not to use?
8. Adding responsivity
CS 411-Human Computer Interaction
GUIDELINES FOR USER-FRIENDLY INTERFACES
❑Instructions that are easy to learn and remember
❑Context sensitive help
-Different help texts should be displayed based on the
current state of application
❑Logically connected functions presented together and
consistently
-File menu: print, save, open, new
❑Create graphically user interfaces whenever possible
-graphical symbols trigger faster recognition than do
textual input and output CS 411-Human Computer Interaction
Know the User of your APPLICATION
❑Novice user who has rarely used a computer
-Require lots of feedback and very clear, constructive error
message
-Limit number of commands required
❑Knowledgeable user who has used a variety of systems
-Allow ability to explore without doing something dangerous.
-Menus, consistent commands, help screens
❑Frequent user
-Many shortcuts
CS 411-Human Computer Interaction
CLIPPY
❑ Why was Clippy disliked by so
many?
❑Was it annoying, distracting,
patronizing or other?
❑What sort of user liked Clippy?
CS 411-Human Computer Interaction
USER FRUSTRATION
MANY CAUSES:
oWhen an application doesn’t work properly or crashes
oWhen a system doesn’t do what the user wants it to do
oWhen a user’s expectations are not met
oWhen a system does not provide sufficient information to enable the user
to know what to do
oWhen error messages pop up that are vague, obtuse or condemning
oWhen the appearance of an interface is garish, noisy, gimmick or
patronizing
oWhen a system requires users to carry out too many steps to perform a
task, only to discover a mistake was made earlier and they need to start all
over again.
CS 411-Human Computer Interaction
Know the User of Your Application
❑Gather user population profiles that reflect:
❖ age
❖Gender
❖Physical ability
❖Training
❖Goals
❖personality
❑Understand the future users of the system
CS 411-Human Computer Interaction
DIFFERENT USER INTERFACE
DESIGN PRINCIPLES
The concept of:
1. Structural
2. Simplicity
3. Visibility
4. Feedback
5. Tolerance
6. Reusability
CS 411-Human Computer Interaction
THE CONCEPT OF
1 STRUCTURAL
❑This is the initial stage of to design the software
application user interface which deals with overall UI
architecture.
❑ It provides the structural data of the software application
with combined the application related data and separated
the unwanted things.
❑This concept makes the software application to be well
Organised (meaningful), Innovative (technological
development), understandable (purpose of the software
application) and useful (satisfy certain criteria).
CS 411-Human Computer Interaction
THE CONCEPT OF
2 SIMPLICITY
❑This process indicates the design of software application user
interface should be simple, long lasting, user friendly with user
control over user interface, sustainability, clarification on
complexity, accurate throughput response, maximum usability
and user’s language.
❑We expect our user do mistakes on UI, justify our data’s, don’t
develop busy interface and explain the rules that are the best
tips for the design of user interface for the software application
❑ It will always helps to reduce the number of tasks to complete
the total actions on the UI and protects the users data into the
software application.
CS 411-Human Computer Interaction
THE CONCEPT OF
3 VISIBILITY
❑This concept of UI design technique involves the visibility of
user interface for a software application
❑ It mainly deals with graphical user interface i.e. the
alignment is correct or not, spelling checking, position of logo
or banners, consistency, easy to navigate with status, colour &
brightness of UI and without hesitation to the user
❑ Shows emphasis on the performance issue of the UI.
CS 411-Human Computer Interaction
THE CONCEPT OF
4 FEEDBACK
❑This principle indicates the enhancement of user interface
view depends of feedback.
❑ It always welcomes to change or modify the UI depends upon
the user or client reviews. So the designer always analyze the
process, view, any ambiguity issues, bugs, technological
advancement, change of conditions and to make more user
friendly of user interface of the software product.
❑ Shows emphasis on every action on the UI returns a
meaningful and clear reaction or feedback.
CS 411-Human Computer Interaction
THE CONCEPT OF
5 TOLERANCE
❑This is one of the concepts of user interface design for
the software application which deals or affects the budgeting of
the application
❑ The UI designer will design the interface that will be always
flexible and tolerant, so it reducing the cost of rework of user
interfaces change.
❑ For any stage of the application the UI should be tolerable in
sense.
CS 411-Human Computer Interaction
THE CONCEPT OF
6 REUSABILITY
❑This is the last technique of the user interface design.
❑ The designer should design the way where the user interface
view should be reusable inside the software application..
❑ Some internal or external components, behaviour of
components, consistency of application should be reuse inside
it. So that the user should not remember the interrelated
process flow of the application on the user interface.
❑It provides some short cut keys to the user for easy to work on
that.
CS 411-Human Computer Interaction
RULES FOR INTERFACE DESIGN
❑Be consistent in syntax, terminology, action sequence
and layout
❖ Do not allow user to delete a character, remove a
word,
destroy a line and kill a paragraph.
❖ All menus should follow the same format.
❖ All error messages should use similar terminology
and appear in the same location.
CS 411-Human Computer Interaction
RULES FOR INTERFACE DESIGN
❑Provide Shortcuts
-abbreviations, special keys, hidden commands
-File/Edit/Cut, scissor icon, CTRL+X
❑Offer Useful, Meaningful Feedback
-Every action, successful or unsuccessful, should result
in some sort of feedback to the user
-audio tone, display of some text, change of icon
❑Verify Deletion Tasks
-Do not delete any major item without asking the user
whether he is sure about the deletion.
CS 411-Human Computer Interaction
RULES FOR INTERFACE DESIGN
❑Allow Easy Reversal of most actions
-An “UNDO” command increases user productivity by allowing
the user to reverse the most recent actions without having to start
the entire operation over again in case of mistakes.
-relieves user anxiety
❑Display Only Currently Relevant Information
-The user should not have to wade through extra information to
find what is needed
-Context sensitive help
CS 411-Human Computer Interaction
DISCUSSION: Your standards
❑Uniformity of appearance reduces learning time
❑What are your standards?
❑Who are your users? How will your interface address their
needs?
❑What shortcuts will you provide for the advanced user?
❑What context sensitive help will you provide?
❑How does your design allow for easy reversal of
operations? DUE DATE: October
CS 411-Human 8,Interaction
Computer 2021
USABILITY TESTING
❑The produces by which the human-computer
interaction characteristics of a system are measured, and
weaknesses are identified for correction.
❑Usability-the degree to which software assists the user
to accomplish a task, as opposed to becoming an
additional impediment to such accomplishment.
CS 411-Human Computer Interaction
USABILITY GOALS
CS 411-Human Computer Interaction
SAMPLE QUESTIONS 1
DEMOGRAPHIC QUESTIONNAIRE –
❑What is your gender?
❑What is your age?
❑What is your role on campus?
❑Computer Skill level—Are you comfortable using the
computer?
CS 411-Human Computer Interaction
SAMPLE QUESTIONS 2
❑What are the two things about the
design that you really liked?
❑What are the two things about the
design that you didn’t like?
CS 411-Human Computer Interaction
SAMPLE QUESTIONS 3
❑The software is easy to use.
❑I can easily get back to a previous page.
❑I always know where I am on the site.
❑It’s easy to get lost.
❑The software colors appeal to me.
❑The design of the software appeals to me.
❑The text is easy to read.
❑I would consider buying this software
CS 411-Human Computer Interaction
SAMPLE QUESTIONS 4
❑I understand how to use the interface.
❑I can make the right choice and explain the why?s.
❑I learned something new.
❑I found the experience potentially helpful for me.
❑I found the experience interesting and engaging.
CS 411-Human Computer Interaction
SAMPLE QUESTIONS 5
What emotions were provoked when using the software?
I found this software:
•enjoyable
•entertaining
•helpful
•challenging
•aesthetically pleasing
•boring
•annoying
•frustrating
•cutsey
CS 411-Human Computer Interaction
SAMPLE QUESTIONS 6
❑I found the software easy to navigate: 1 2 3 4 5
❑I found the software to be readable: 1 2 3 4 5
❑I believe the software displayed correctly for me: 1 2 3 4 5
❑I thought the software loaded quickly: 1 2 3 4 5
❑I think the software is visually appealing: 1 2 3 4 5
❑What features could be improved on the software?
❑What features did you like?
❑What parts of the software didn’t you like?
❑Any other comments?
CS 411-Human Computer Interaction
An Interactive Heuristic Evaluation Toolkit
❑This interactivity teaches you about how to choose
appropriate heuristics for different user-groups with
different types of devices
❑-Visit [Link]
CS 411-Human Computer Interaction
Designing and Using Questionnaires
❑This interactivity allows you to select from among
8 questionnaire templates. You can use the
templates as they are or customize them for own
studies.
❑[Link]
CS 411-Human Computer Interaction
1. Create a website (blog) containing “ABOUT YOU”
2. Create google form survey questionnaire based on the
“Usability Testing”.
Refer to the following guides:
-[Link]
testing-questions-tips-examples/
-[Link]
tools/methods/[Link]
3. Ask your friends, relatives, colleagues, etc. to answer the
survey questionnaire.
DUE DATE: October 15, 2021
CS 411-Human Computer Interaction
REFERENCES
❑Taylor, Sarah (Aug. 18, 2020). Factors to consider in user interface design. Retrieved
from [Link]
❑EDUCBA (n.d) Design Principles. Retrieved from [Link]
interface-design-principles/
CS 411-Human Computer Interaction