Lec 7 Ui, Ux

CSEN603 –Software Engineering
Lecture 7: Usability and UI/UX II Mervat Abuelkheir

Nada Hisham
Marina Nader
Nada Labib
Kamilia Awad
Dimensions of Usability – Efficiency
 Performance of the backend, algorithms, and data structures is important to analyze and
improve
 Dependent on system model and design, networking elements, programming language, data
structures, databases, …
 Performance of interface between the user and the system is also important
 How quickly can we get instructions and information across that interface?
 Power Law of Practice – Time to do a task for the nth time decreases with frequency of
doing task
𝑇𝑛 = 𝑇1 × 𝑛−𝛼 , 𝛼 𝜖 0.2,0.6
SWE - UI/UX II - GUC 2023 2

Efficiency – Best Practices for UIs
 If your interface has a large number of related questions to ask a user, aggregate them
into a single dialog
 e.g. a list of files, with multiple selection options, select all, unselect all options
 Make frequently used UI targets BIG
 Put UI targets used together next to each other
 Choose keyboard shortcuts that are easily associated with commands
 Use defaults and history
 initial entry  most likely function
 After use  previous/recent entry
 Anticipate user action

Interjection: Data Access, Networks, and Efficiency
 Software operations that transfer data from a

backend DB or over the network have unpredictable
response times and are subject to delay
Best practices
 Large data transfers should run asynchronously in a
separate thread
 Provide visual feedback to indicate that the
operation is in progress
 Provide option to cancel long running data transfers
 Write “good” SQL queries and optimize

Dimensions of Usability – “Designing” for Errors
 Slips and lapses – Failure to correctly
execute procedure, or failure of memory
 “Strong but wrong” – similarity and
frequency are causes of lapses
 usually made by expert users
 Errors of automatically learned behavior
 e.g. post share options on Facebook had
Messenger as 2nd option but now is story
 Execution of a correct action directed
toward the wrong object
 e.g. instead of Ctrl+B you Ctrl+V
 Mistakes made by novice users

Dimensions of Usability – “Designing” for Errors
 How to prevent
 Avoid habitual sequences and actions
with similar descriptions
 Keep dangerous commands away from
common commands
 And in general, better to use many
horizontal shallow menus than few
deep menus
 Use confirmation dialogs? This affects
efficiency
 Reversibility is better than
confirmation

How to write a perfect error message
Writing Error Messages
 Best error messages are NONE
BUT
 Be precise
 e.g. name contains wrong characters
 Restate user’s input
 e.g. cannot open file “SE.docx”
 Speak user’s language
 e.g. NOT “Buffer Overflow Exception” or stack
trace
 Suggest reason and solution
 e.g. cannot delete file. It might be in
use. Close file before delete?
How to write a perfect error message
Writing Error Messages
 Best error messages are NONE
BUT
 Be precise
 e.g. name contains wrong characters
 Restate user’s input
 e.g. cannot open file “SE.docx”
 Speak user’s language
 e.g. NOT “Buffer Overflow Exception” or stack
trace
 Suggest reason and solution
 e.g. cannot delete file. It might be in
use. Close file before delete?
Give The User Control and Freedom
Users like to explore interfaces to learn, so give them control
 Provide flexible/multimodal interaction (e.g. keyboards, clicks)
 Allow user interaction to be interruptible or undoable
 Allow for streamlined interaction as skill levels advance (customization)
 All dialogs should have a Cancel button (All?)
 Allow user to override automatic options
 Have the option of “Never ask again”
 Give the user control over the data they entered (create, update, delete, read)
 This will affect your system model in terms of data mutability (references in code to user data that can
be changed by user)
 And do not arbitrarily limit user input
Give The User Control and Freedom

Dimensions of Usability –Accessibility
 Software designers must be prepared to  Signal what’s available and what’s
users with disabilities important
 e.g., poor eyesight, lack of hearing, poor  Visual feedback through labels, color, icons
manual dexterity, situational disability such as  Touch feedback (for touch-enabled UIs)
a broken arm, limited knowledge of English  Important actions at top or bottom (reachable
with shortcuts)
 Requirements about accessibility are  Related items next to each other
mostly related to the UI, not the system
 Simplify app’s hierarchy
 You may have a legal requirement to  Clearly visible elements
support people with disabilities  Sufficient contrast and size
Assistive technology  A clear hierarchy of importance
 Key information discernable at a glance
 Screen readers  Navigation with minimum steps for clear flow
 Directional controllers  Frequently used tasks get focus control

Accessibility – Navigation
Screen readers rely on top-down HTML structure and will verbalize in the top down order
Do Don’t

Accessibility –Color
 Color contrast is important for users to distinguish various text and non-text elements
 Higher contrast makes the imagery easier to see
 Use a good contrast ratio for text and for icons (3:1 or 4.5:1 foreground to background)
Do Don’t
Accessibility –Color of Text
 Colored text should be used
sparingly to draw attention
and apply selective emphasis
 Large headlines and short
text snippets are best for
colored text
 Should not use color for long
body copy text
 You can use the Material
Palette to test your color
choices for background and
foreground elements
Do Don’t
Accessibility –Alt Text
 Accessibility text is text used by screen reader accessibility software
 Accessibility text includes visible text (e.g. labels for UI elements, links) and nonvisible
descriptions that don’t appear on screen (e.g. alternative text for images)
 Visible and nonvisible text should be descriptive and meaningful
Do Don’t
 Most screen readers do not read more than 125 characters of text, so make alternative
text concise
 Include targeted keywords in alternative text, but do not use just keywords
Do Don’t
 Do not repeat image caption/description in alternative text, otherwise the screen
reader will read the same thing twice
Do Don’t
Accessibility –Action Text
 Action verbs should indicate what an element or link does if tapped not what an
element looks like
 Consider other navigation options when describing how to interact with a control
 If icon is an action and is selected, the text label can specify the action for screen reader to verbalize
(e.g. Add to wish list)
 If icon is a property of an item (coded as checkboxes), screen readers will verbalize the current state
(e.g. on/off)
Do Don’t
UI Design Mistakes I
 Lack of consistency
 Too much memorization
 No guidance/help
 Poor error messages formulation using jargon and/or judgemental language
 Error messages with no recovery instructions
 Help that is not easily accessible or not well presented
 Help that does not provide navigation back to main or previous context
 No context sensitivity
 Poor response
 Arcane/unfriendly

UI Design Mistakes II
 Trying to get the user’s attention with
 Intensity (e.g., boldface vs. regular font)
 Marking (e.g., underlining)
 Size (only 4 font sizes)
 Choice of fonts (<=3)
 Blinking
 Color (<=3)
 Audio
 Inverse video

Nielsen’s 10 Usability Heuristics

User-driven Design
 Users appear in the requirements analysis phase, then in the acceptance testing phase
 But should be involved in an iterative design process to capture problems in UX early
 If you wait until acceptance testing, UI problems may affect your system design
dramatically
 You may follow an iterative design/development process – you release versions of your
software to market and use evaluations to release better future versions
 But even with an iterative process, you should not allow bad designs to be released to
market and hope they will be evaluated by users for a next “better” version release
 Users may not use future versions 
 A better approach is to involve users early in low-fidelity designs before development

More on Fidelity in Prototypes
 Release low-fidelity “cheap” mockups first (Scenarios, Wizard of Oz), show to users, get
their feedback and evaluation, and incrementally build higher-fidelity prototypes
(HTML), then develop refined models
 Makes it possible to build multiple parallel mockups of alternative designs in early
stages of system
 Focus now on task analysis and constant evaluation
 Breadth  number of features covered
 Depth  degree of functionality
 Look  appearance and graphics
 Feel  input method

 Horizontal prototype
 Very broad in the features it incorporates
 Offers less depth of functionality coverage
 Good place to start with your prototyping
 as it provides an overview on which you can
base a top-down approach
 Effective to demonstrate product concept
and to convey early product overview to
managers, customers, and users
 Because of the lack of details in depth,
usually do not support complete
workflows, and UX evaluation with this
kind of prototype is less realistic

 Vertical Prototype
 Contains as much depth of functionality as
possible for current state of progress, but
only for a narrow breadth of features
 Can test a limited range of features but
those functions that are included are
evolved in enough detail to support
realistic UX evaluation
 Ideal for times when you need to
represent the details of an isolated part of
a single interaction workflow
 The goal is to understand how those details
play out in actual usage

 “T” Prototypes
 Combines the advantages of both
horizontal and vertical, offering a good
compromise for system evaluation
 Much of the interface is realized at a
shallow level (the horizontal top of the T),
but few parts are done in depth (the
vertical part of the T)

 Local Prototype
 The small area where horizontal and
vertical slices intersect
 The depth and breadth are both limited to
a very localized interaction design issue
 A local prototype is used to evaluate
design alternatives for particular isolated
interaction details
 e.g. the appearance of an icon, wording of a
message, or behavior of an individual
function

Generating Designs –Sketches/Wireframes
 Makes user feel safe knowing that
design is not final
 Ideation phase and validation phase
 Nonprogrammers can help
 Easier to change
 Generate many ideas, describe your
ideas in writing, brainstorm with
team
 Example App: location-based photo
app – how would you design home
page?
 Limitations of sketching?
Generating Designs –Wireframes/Wireflows
High-fidelity wireframes showing navigation

Generating Designs –Scenarios or “User Journeys”
Three zones:
1. Actor, Scenario, and
Expectations –
represent persona,
user story, and goals
2. Experience –
represent phases,
actions, mindsets, and
emotions
3. Opportunities,
ownership, and
metrics to optimize UX

Example User Journey

Generating Designs –Wizard of Oz
 Wizard of Oz
 Computer frontend, human
backend (simulation of software
that does not yet exist)
 User interacts with frontend,
and human designer figures out
response behind the scenes

Fidelity of Prototypes

Interactivity of Prototypes
 Scripted and “Click-Through” Prototypes

 A Fully Programmed Prototype
 “Wizard of Oz” Prototypes: Pay No Attention to the Man Behind the Curtain
 Physical Mockups for Physical Interactivity
 Paper-in-device mockup prototype, especially for mobile applications
 Animated Prototypes

Building the Right Prototype

Information from Requirements Analysis Can Help Identify:
 Are important tasks covered in design?

 Which usability aspects matter most?
 Learnability, error prevention
 How large will data get?
 Sorting, filtering, searching

Design Patterns for UI - https://ui-patterns.com/
Structural Navigation Widgets
 e.g. Wizard • e.g. Breadcrumbs • e.g. Dropdown lists

Vertical
Dropdown Menu
UI Pattern
Walkthrough UI Pattern Table Filter UI Pattern SWE - UI/UX II - GUC 2023 39

Usability for Web Sites and Mobile Devices
 UIs must consider physical constraints of  Constraints for UIs

computers and networks  performance of device (e.g., fast or
 How does a desktop computer differ slow graphics)
from a laptop?  limited form factor (e.g., small display,
 What is special about a smartphone? no keyboard)
 How do you make use of a touch-  connectivity (e.g., intermittent)
sensitive screen?
 What works well with a digital camera?

Usability Metrics
Users instructed to perform tasks Advantages of Metrics

 Qualitative observation  Track progress of design across re-
 Usability Metrics testing
 Success rate  Compare two designs
 Number of errors  Assess design against competitor
 Time to complete tasks products/services
 Users’ subjective satisfaction  Go/No-go decision  Set
 Rating scales Usability Goals
 Usefully summarizes results
LinkedIn Posts? NO

User Interface (UI), Usability, and User Experience (UX)
What are the different kinds/levels of users/experiences?
 Novice
 Have little knowledge about usage
 Use small vocabulary of familiar terms
 Give informative feedback
 Knowledgeable intermittent users
 Know task but may forget specific details
 Frequent users
 Want to accomplish tasks rapidly with a few keystrokes or clicks

User Interface (UI), Usability, and User Experience (UX)
Our goal is to design UI that increase usability and provide great user experience
Watch users interact with the system and answer the following questions
 Is the system usable without continual help or  Is the interface structured in a logical and
instruction? consistent manner?
 Do the rules of interaction help a knowledgeable  Are interaction mechanisms, icons, and
user to work efﬁciently? procedures consistent across the interface?
 Do interaction mechanisms become more ﬂexible  Does the interaction anticipate errors and help
as users become more knowledgeable? the user correct them?
 Has the system been tuned to the physical and  Is the interface tolerant of errors that are made?
social environment in which it will be used?  Is the interaction simple?
 Is the user aware of the state of the system? Does
the user know where she is at all times?

UX Best Practices
Input Typography Colors General

 Prioritize  Legible  Appropriate  Consistent Navigation
 Instant Feedback  Readable  Less is better  Avoid Crashes
 Ergonomic  Appropriate  Set a Palette  “Is this step necessary?”
 UI Elements  Look to Web Fonts  Recovery instead of
warning
 Guest Checkout / Trial /
Linked accounts

Lessons Learned from Social Media Apps
DO
 Always make it look like the app is doing
something
 Order content based on importance
 Anticipate a user’s move
AVOID
 Not knowing your users
 Inconsistency
 Not giving the users what they want

Further Themes to Recall and Explore
Output  graphics and rendering

Input  input modes and listeners
High-fidelity Layout  HTML and CSS
Accessibility and HCI  How to provide an inclusive UX for the visually impaired, hearing
impaired, users with motor disabilities

Further Fun Readings
https://engineering.instagram.com/beautiful-performant-android-ui-62ce61ca748c
https://slack.engineering/android-ui-automation-part-1-building-trust-de3deb1c5995
https://slack.engineering/android-ui-automation-part-2-making-it-easy-57335c7379cc
https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-
our-frontend-ui-library/
Comparing quantiles in online A/B testing: https://engineering.atspotify.com/2022/03/comparing-quantiles-
at-scale-in-online-a-b-testing/
Storyboarding Tutorial: https://www.alexandercowan.com/storyboarding-tutorial/
Example LinkedIn UI testing post with insightful comments from experts:
https://www.linkedin.com/posts/nabilelsawi_ux-ui-research-activity-6910551622704144384-_q4g

NEXTWEEK on
SE –Process
and Methods –
Agile
48
ThankYou
mervat.abuelkheir@guc.edu.eg
49
Supplementary
Slides

Dimensions of Usability – Efficiency and Perception
 Proximity  Do
• Consistency in design, (world, internal)
 Similarity
• Visually pleasing composition
 Matching patterns • Logical and sequential ordering
 Closure • Presentation of the proper amount of
information
 Unity • Groupings
• Alignment of screen items
 Continuity
 Don’t
• Visual clutter
• Indistinct elements
• Random placements
• Confusing patterns

Visually Pleasing Composition
 Balance  “An entity's design composition
 Symmetry communicates to a person nonverbally,
but quite powerfully. It is an unconscious
 Regularity process that attracts, motivates, directs,
 Predictability or distracts.”
 Sequentiality  “A lack of visually pleasing composition is
 Economy disorienting, obscures the intent and
meaning, slows one down and confuses
 Unity one.”
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings

Disclaimer
Content is adapted from MIT’s User Interface Design and Implementation course

Lec 7 Ui, Ux

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec 7 Ui, Ux

Uploaded by

Copyright:

Available Formats

CSEN603 –Software Engineering

Lecture 7: Usability and UI/UX II Mervat Abuelkheir

SWE - UI/UX II - GUC 2023 2

SWE - UI/UX II - GUC 2023 3

 Software operations that transfer data from a

SWE - UI/UX II - GUC 2023 4

SWE - UI/UX II - GUC 2023 5

SWE - UI/UX II - GUC 2023 6

SWE - UI/UX II - GUC 2023 10

SWE - UI/UX II - GUC 2023 11

SWE - UI/UX II - GUC 2023 12

SWE - UI/UX II - GUC 2023 19

SWE - UI/UX II - GUC 2023 20

SWE - UI/UX II - GUC 2023 21

SWE - UI/UX II - GUC 2023 22

SWE - UI/UX II - GUC 2023 23

SWE - UI/UX II - GUC 2023 24

SWE - UI/UX II - GUC 2023 25

SWE - UI/UX II - GUC 2023 26

SWE - UI/UX II - GUC 2023 27

High-fidelity wireframes showing navigation

SWE - UI/UX II - GUC 2023 29

SWE - UI/UX II - GUC 2023 30

SWE - UI/UX II - GUC 2023 31

SWE - UI/UX II - GUC 2023 33

SWE - UI/UX II - GUC 2023 34

 Scripted and “Click-Through” Prototypes

SWE - UI/UX II - GUC 2023 35

SWE - UI/UX II - GUC 2023 36

 Are important tasks covered in design?

SWE - UI/UX II - GUC 2023 37

SWE - UI/UX II - GUC 2023 38

Walkthrough UI Pattern Table Filter UI Pattern SWE - UI/UX II - GUC 2023 39

 UIs must consider physical constraints of  Constraints for UIs

SWE - UI/UX II - GUC 2023 40

Users instructed to perform tasks Advantages of Metrics

SWE - UI/UX II - GUC 2023 41

SWE - UI/UX II - GUC 2023 42

SWE - UI/UX II - GUC 2023 43

Input Typography Colors General

SWE - UI/UX II - GUC 2023 44

SWE - UI/UX II - GUC 2023 45

Output  graphics and rendering

SWE - UI/UX II - GUC 2023 46

SWE - UI/UX II - GUC 2023 47

SWE - UI/UX II - GUC 2023 50

SWE - UI/UX II - GUC 2023 51

SWE - UI/UX II - GUC 2023 52

SWE - UI/UX II - GUC 2023 53

SWE - UI/UX II - GUC 2023 54

SWE - UI/UX II - GUC 2023 55

SWE - UI/UX II - GUC 2023 56

SWE - UI/UX II - GUC 2023 57

SWE - UI/UX II - GUC 2023 58

SWE - UI/UX II - GUC 2023 59

SWE - UI/UX II - GUC 2023 60

SWE - UI/UX II - GUC 2023 61

SWE - UI/UX II - GUC 2023 62

You might also like