User Interface

Design
Interface Design
Initially users must adapt to
complex systems
For being technical
Now technology must consider
human ease
Usability matters a lot!!!!
Interface Design
lack of consistency
too much memorization
no guidance / help
no context sensitivity
poor response
unfriendly
Golden rules for UI design (by Theo Mandel)

1 2 3
Place the user in control Reduce user’s memory Make a consistent
load interface
Principle 1: Allow users to maintain
control
Define interactive modes that allow the user to let them do whatever they want freely
Define different modes and allows easy switching between modes
E.g., spell check and editing modes in the word processor, read mode, browser modes, etc.
Allow flexible interaction
Allow users to interact via multiple ways like the mouse, keyboard, digitizer pen, voice
inputs, multitouch inputs, etc.
Allow user interaction to be uninterruptable and undoable
Freely allows the user to quit a work and do another without losing changes
Undo/redo also allowed
Principle 1: Allow users to
maintain control
Allow creating customized operations
Create macros for Frequently occurring operations(e.g., like in MS word)
For advanced users to customize UI
Hide technical internals from casual users
User is unaware of the underlying OS, file management operations and other complexities
E.g., in Application software, there is no need to give OS commands.
Design for direct interaction with on-screen objects
Icons or other objects could be dragged or scaled up or down as if they exist physically.
Principle 2: Reduce User’s
memory load
Well designed system doesn’t test user’s memory
E.g., Use list boxes or checkbox inputs rather than text boxes.
Reduce demand to learn more
Users should not have to recall past inputs, rather they are saved and shown using
visuals.
Establish meaningful defaults
User should have a preference to customize layout or change the default settings.
However, reset could change them to defaults again.
Principle 2: Reduce User’s
memory load
Define intuitive shortcuts
Bind shortcuts that are easy to remember like ctrl+p for print
Visual layout should be near to real-time systems
E.g., the bill paying process should be the same as in real life.
All steps must be fulfilled.
Disclose information in a progressive fashion
Information displayed on multiple levels.
E.g., E-commerce websites have just pictures. Click that to show detailed information,
different underline options shown when clicked on the list further
Principle 3: Make consistent
interface
Allow users to put tasks in meaningful context
User should have an idea of the work they are doing
Like windows should be labeled with titles, consistent color coding should be used for the same
tasks etc.
Don’t make changes in system against user’s previous habits, until you are compelled to do so
Don’t redefine the user’s past experiences in UI
For example, Ctrl+S is used for save. Don’t bind it with scaling. As user is expecting on his past
experience that it’ll save the file.
Principle 3: Make consistent
interface
Maintain consistency across a family of applications
A set of applications must follow a particular pattern
As the front and the back view is same in whole MS office.
UI Analysis & design

Segregate
Think of design
human-oriented Tools are used to Implement design Users evaluate
issues for UI
and computer- prototype model the design quality
design
oriented tasks
UI Design models

System perception/mental
User model Design model Implementation model
model

Analyze all end user profile Design realization of end End user’s perspective of a The interface look & feel along
Like age, gender, physical user’s model system with supporting information
abilities, education, culture, (books, manuals, videotapes etc.)
preferences etc. showing interface semantics.
User types:
Novice
Knowledgeable, intermittent
users
Knowledgeable, frequent
users
UI Design models
Hence, an effective design is one in which the user mental
model and implementation model coincides
UI analysis & design Process
Iterative process – It uses the spiral process model
Four steps are:
Interface analysis
Interface design
Interface implementation/construction involves a
prototyping approach
Interface validation
Since it’s spiral model so these steps need to be processed
again and again for design betterment.
UI analysis & design Process
User analysis:
who are going to use the system?
Novices
Knowledgeable, Intermittent
Knowledgeable, Frequent
What is the skill level, business perception ?
User diversity?
Gather requirements for each user category & understand
system by each category perspective.
Interface Analysis
User Analysis:
Understand problem before designing the solution.
Understand users of the system,
the system goals (tasks),
the displayed content,
the environment in which tasks is conducted.
The mental image and the design model must converge.
Can be achieved by understanding the users and how they use the
system
Interface Analysis-User Analysis
Information for system understanding can be obtained by:
User interviews
development team members met with end users to identify their needs and work
culture.
Marketing & sales input
Take the market survey and check in how many ways the product could come
handy.
Support input
Support staff takes feedback of the what work or what not. Which features are easy
to use or not etc.
 Are users trained professionals, technician, clerical, or manufacturing workers?
Level of formal education of an average user?
Are the users capable of learning from written materials or have they expressed a desire for
User Analysis classroom training?
users expert typists / keyboard phobic?
age range of the user community?
questions for User’s gender?
How are users compensated for the work they perform?
better user Working hours: normal office hours / until the job is done?
Software usage frequency ? (mostly/occasionally)
primary spoken language among users?
categorization consequences of a user’s mistake while using the system?
Are users experts in the subject matter that is addressed by the system?
Are users interested in learning about the technology that sits behind the interface?
UI analysis & design Process
Task analysis:
Detailed task analysis done after user analysis.
The tasks that users will perform to accomplish
system goals.
User environment analysis:
done to check if the current physical environment be
able to cater the system needs?
Output: Analysis model for interface
 Task Analysis & Modelling
answer the given questions …
Task identification in specific circumstances.
Tasks and sub tasks performed by user
sequence of work tasks—the workflow
Use-cases:
define basic interaction of actor and system

Interface written using informal paragraphs.

Can be used to derive tasks, sub tasks and interfaces
Task elaboration:
Stepwise elaboration or task refinement of interactive tasks

Analysis Derive either manually or use a preexisting system to identify them

Object elaboration:
extract physical objects from system to define their classes and behavior
Workflow analysis:
How defines how a work process is
a work process is completed when several people (and roles) are involved
Shown using UML swim line diagram
<number>
Interface Analysis
Task Analysis & Modelling
Swim line diagram
Interface Analysis
Analysis of Display Content
Format of the content
Aesthetics
Content displayed using stepwise refinement approach

Analysis of Physical Work Environment

Work environment should be helpful in proper operation and concentration .
Must co-relate with the designed software aesthetics.
UI analysis & design Process
Interface design:
A set of interface objects and actions along
with their screen representation that allows
user to perform all tasks and fulfil the
usability goals of the system.
Interface Construction/implementation:
Create prototype against a use case
scenarios.
Interface Design Steps
UI Design models state that:
Using information developed during interface analysis,
define interface objects (buttons, text fields, video etc.) and
operations (tasks)
Define events (user actions) that will change the state of the UI.
Depict each interface state as it will actually look to the end-user.
(using sketches).
Show how the user infer the System state from information provided
through the interface.
Interface Design Steps
Apply interface design steps
Define the use-case:
Create the list of objects and actions
These objects & actions are categorized into different type.
Identify which are source (e.g., printer icon), target (e.g., paper) and application
objects(e.g., screen, entity/db table).
Use UI design patterns
As specific deign pattern is formulated for a well bounded solution.
E.g., for a calendar UI, a Calendar Strip is created that allows to traverse in future dates,
marking the current one.
Interface Design Steps
Design Issues
Some of the issues in interactive systems are:
System Response time
Help facilities
Error handling
Menu & command labelling
Interface Design Steps
Design Issue 1: System Response time
Primary complaint for almost every interactive system
Two characteristics:
Length: longer response times are not appreciated, led to user
frustration
Variability: varying response time led to user confusion, like
whether something went wrong at backend which is leading to a
different response time than average response time.
Interface Design Steps
Design Issue 2: Help Facilitates
Online helpdesk
Detailed user manuals
Design issues while providing Help
facilities
Help availability for all
functionalities?
How will user demand help?
(give menu for that or a function key
mapped to that)
How is help presented? (via another
window or a printed manual)
How to return to normal UI after
consulting help
Interface Design Steps
Design Issue 3: Error Handling
Error messages & warnings are bad news to users when something went
wrong.
Error message must be explanatory and should include some remedies for
that (via hyperlinks)
A good error message includes:
Describe problem simply
Provide valuable advice
List the negative consequences of the error
Message must prompt visually using a color scheme that easily
categorize it as an error.
Interface Design Steps
Interface Design Steps
Design Issue 4: Menu & Command labeling
Different styles like command oriented arch and UI based arch.
Both are used frequently
How commands are assigned to each menu item so that it may run without UI as well.
Design Issue 5: Application Accessibility
UI should cater the needs of the physically challenged persons as well (like some sort of voice
inputs could be accepted to facilitate handicapped)
Design Issue 6: internationalization
UI must target the global market
Follow global design standards & facilitate multiple languages.
UI analysis & design Process
Interface validation:
Check if the system accommodates all
variety of tasks?
Whether the system is easy to use &
learn?
users’ acceptance of a system as
useful tool
Now, we’ll cover each separately in detail
Revised Interface Design Guidelines

Controlled
Anticipation Communication Consistency Efficiency
autonomy
Application must depicts Application must show The navigation controls, Revising the golden rule Design of the application
the user’s expected move. the status of an activity menu, icons, aesthetics that says place user in must work on user’s
E.g., software installation initiated by user. should be consistent control but restrict the efficiency.
procedures are defined in E.g., file copying shown throughout the controls as per the user’s e.g., input the CNIC or
a way to predict next step via progress bar application role. phone no without space
for users. They don’t need E.g., like yellow triangle Enforce id and password or hyphen will lead to less
to search for the next shows warning signs use for no go options. processing time at user
work. them for warning end.
messages only.
Revised Interface Design Guidelines

Focus Fitt’s Law Latency Reduction

The interface should help user stay focused Law—“The time to acquire a target is a Interface must do multitasking rather than
and give the relevant options and data first function of the distance to the target and kept user waiting for an operation to
the size of the target.” complete
e.g., display a progress bar to show the
progress of the task like downloading or
Show and animated visuals to keep user
focused.
Revised Interface Design Guidelines for a Web App
Learnability Minimize learning time by creating simple & intuitive designs

Maintain work product An interface should autosaved the user data

e.g., filling out long forms and loosing data in case of an error in an input field. This leas to
integrity frustration. So the data should be saved for all the correct fields.

Readability All information presented should be readable by all age group users

Cookies can be used to track user activities so user may logout any time & can continue from
Track state the same state after logging in again

Visible navigation Obvious navigation bars mentioned on every interface of the application.
Interface Design
Workflow:
Derive and refine information from requirements
Develop rough layout sketch
Map user objective to actions (like Home, Contact, booking, facililities, etc….)
Create storyboard screen images for every interface
Refine layouts by improving aesthetics
Develop an activity diagram to show the design flow
Develop state diagrams to show changes in state after transitions
Describe interface layout for every state
Refine & review the model.
Interface
Design
Evolution