SWE 321 - Advanced User Interface Design

Software Engineering Department

College of Engineering and Architecture
Al Yamamah University

Introduction to UI
User Centered Design

Fall
User Interface - What is it?
● The user interface is the part of a computer and its software that people can
see, hear, touch, talk to, or otherwise understand or direct.
● The user interface has essentially two components: input and output.
○ Input is how a person communicates his or her needs or desires to the computer.
○ Some common input components are the keyboard, mouse, trackball, one's finger (for touch-
sensitive screens or pads), and one's voice (for spoken instructions).
○ Output is how the computer conveys the results of its computations and requirements to the
user.
● Today the most common computer output mechanism are:
○ The display screen.
○ Followed by voice and sound.
○ The use of the human senses of smell and touch output in interface design still remain
largely unexplored.

2
User Interface Design.
● User interface design is a subset of a field of study called human-computer
interaction (HCI).
○ Human-computer interaction is the study, planning, and design of how people and computers
work together so that a person's needs are satisfied in the most effective way.
● HCI designers must consider a variety of factors:
○ What people want and expect
○ What physical limitations and abilities people possess
○ How their perceptual and information processing systems work
○ What people find enjoyable and attractive.
● Designers must also consider technical characteristics and limitations of
the computer hardware and software.

3
Proper Interface Design
● Proper interface design will provide a mix of:
○ Well-designed input and output mechanisms that satisfy the user's:
■ Needs
■ Capabilities
■ Limitations
○ in the most effective way possible.
● The best interface is one that is not noticed, and one that permits the user
to focus on the information and task at hand instead of the mechanisms
used to present the information and perform the task.
○ Therefore, The Goal of a UI is to be:
■ Easy to learn
■ Easy to use

4
The Importance of Good Design
● UI can spell the difference between acceptance of a software product and its
failure in the marketplace.
● UI is the users’ window to view the capabilities of the system, the bridge to the
capabilities of the software.
● To many users UI IS the system. Why?!
○ Because:
■ It is one of the few visible components of the product its developers create.
■ It is also the vehicle through which many critical tasks are presented.
● These tasks often have a direct impact on an organization's relations with
its customers, and its profitability.

5
Bad Designs
● A screen's layout and appearance and a system's navigation affect a person
in a variety of ways.
○ If they are confusing and inefficient, people will have greater difficulty doing their jobs and will
make more mistakes.
● Poor design may even chase some people away from a system permanently.
● It can also lead to aggravation, frustration, and increased stress.
○ One user relieved his frustrations with his computer through a couple of well-aimed bullets
from a gun.
○ Another user, in a moment of extreme exasperation, dropped his PC out of his upper-floor
office window.

6
Bad Designs
● Poor interface design can also have a huge financial cost to users and
organizations.
● A critical system, such as one used in air traffic control or in a nuclear power
plant, may compromise the safety of its users and/or the general public.

7
● Lecture 2

8
THE BENEFITS OF GOOD DESIGN
● Productivity increase.
Based on an actual system that requires processing of 4.8 million screens per year. An analysis
established that if poor clarity screen forced users to spend one extra second per screen,
almost one additional person-year would be required to process all screens. Twenty extra
seconds in screen usage time adds an additional 14 person-years.
○ One researcher attempted to improve screen clarity and readability by:
■ making screens less crowded.
■ Separate items, which had been combined on the same display line to conserve space,
were placed on separate lines instead.
■ The result: Screen users were about 20 percent more productive with the less-
crowded version.

9
Crowded design

10
THE BENEFITS OF GOOD DESIGN
● Reduce decision making time.
○ A researcher has reported that reformatting inquiry screens following good design principles
reduced decision-making time by about 40 percent, resulting in a savings of 79 person-
years in the affected system.
○ In a second study comparing 500 screens, it was found that the time to extract information
from displays of airline or lodging information was 128 percent faster for the best format than
for the worst.
● Proper formatting of information on screens improve performance.

11
THE BENEFITS OF GOOD DESIGN
● Cost Reduction:
○ Training costs are lowered because training time is reduced.
○ Support line costs are lowered because fewer assist calls are necessary.
○ Reduction of problem fixing:
■ Every dollar spent fixing a problem during product design, $10 would be spent if the
problem was fixed during development, and $100 would be spent fixing it after the
product's release.
■ A general rule of thumb: Every dollar invested in system usability returns $10 to $100.
● Employee satisfaction is increased because aggravation and frustration
are reduced.
● Customer/client satisfaction is increased.

12
Pointless
inconsistency in your
UI elements

13
Lack of text hierarchy

14
Unaligned elements

15
Low contrast

16
Confusing forms

17
User Centered Design
● Good interface design doesn’t begin with beautiful pictures.
● It begins with an understanding of people:
○ What they’re like, why they use a given piece of software
○ How they might interact with it.
● The more you know about them and the more you empathize with them, the
more effectively you can design for them.
● Remember, Software is merely a means to an end for the people who use
it.
○ The better you satisfy those ends, the happier those users will be.

18
How To Achieve this?
● A framework for achieving this is described here.
● It covers four areas.
● Remember, these are not strict rules or requirements for creating great
designs.
○ But having a plan for how you will inform yourself and your team in each area will give you
confidence that your work is based on real insights into valuable problems to solve for your
target customers.

19
Understanding People
● The four-part structure for understanding design for people is this:
○ Context
■ Who is your audience?
○ Goals
■ What are they trying to do?
○ Research
■ Ways to understand context and goals
○ The Patterns
■ Cognition and behavior related to interface design

20
Context
● The first major element and the first step in designing for people is to
understand the human context for your design intention.
● Interaction design starts with defining and understanding the people who
will use your design.
● Specifically, ground your design decisions in understanding what they may
want to do and what they bring to the interaction in terms of:
○ Expectations
○ knowledge of relevant subjects or information domains
○ Their skill level with software.

21
Remember

“Know Your Audience, For You are not the user.”

22
Interactions
● Interactions Are Conversations.
● Each time someone uses an application, or any digital product, they carry on
a conversation with the machine.
○ It might be literal, as with a command line or phone menu.
○ Or tacit, like the “conversation” an artist has with their paints and canvas—the give and take
between the craftsperson and the thing being built.
○ With social software, it can even be a conversation by proxy.
● Whatever the case, the UI helps users to achieve whatever ends they had in
mind.

23
Interactions - Key Points
● Participants:
○ There are two participants in the conversation: the person and the software.
● Constant Exchange:
○ There is a constant back and forth exchange of information.
● The Exchange
○ The exchange is a series of requests, commands, reception, processing, and response.
● Continuous Feedback:
○ The human in the conversation needs continuous feedback from the interface that confirms
that things are working normally, inputs are being processed, and that they are proceeding
satisfactorily toward the goal of the moment.

24
Continuous Feedback
● the software can’t be as spontaneous and responsive as a real human (at
least not yet).
● For this feedback loop to work, the software should be designed to mimic a
conversation partner.
○ It should be understandable to its partner.
○ It should indicate it’s active (when it’s “listening”).
○ It should be obvious when it’s responding.
○ Another layer on this is having some anticipated next steps or recommendations, in the same
way a considerate person might be helpful to another

25
Designing the Conversation
● As the UI designer, then, you get to script that conversation, or at least define
its terms.
● And if you’re going to script a conversation, you should understand the
human’s side as well as possible.
○ What are the user’s motives and intentions?
○ What “vocabulary” of words, icons, and gestures does the user expect to employ?
○ How can the application set expectations appropriately for the user?
○ How do the user and the machine finally end up communicating meaningfully with each
other?

26
Match Your Content and Functionality to Your Audience

● Before you start the design process, consider the interface’s overall
interaction style—its personality, if you will.
○ When you carry on a conversation with someone about a given subject, you adjust what you
say according to your understanding of the other person.
○ You might consider:
■ How much they care about the subject
■ How much they already know about it
■ How receptive they are to learning from you
■ And whether they’re even interested in the conversation in the first place.
○ If you get any of that wrong, bad things happen—the person might feel patronized,
uninterested, impatient, or utterly baffled.

27
How?!
● The subject-specific vocabulary you use in your interface should match your
users’ level of knowledge.
● If some users won’t know that vocabulary, give them a way to learn the
unfamiliar terms.
● If they don’t know computers very well, don’t make them use sophisticated
widgetry or uncommon interface-design conventions.
● If their level of interest might be low, respect that, and don’t ask for too much
effort for too little reward.

28
29
Assignments
● Give an example of a website/application that you love using and has a very
easy to use UI.
○ List the things that makes you like the website/application.
● Give an example of a website/application that you hate using and has a very
hard to understand UI.
○ List the things that makes you dislike the website/applications
● Links and screenshots are appreciated.
● Submit your work in LMS.

30
Resources
● Book: Designing Interfaces, 3rd Edition: by Aynne Valencia, Charles Brewer, Jenifer Tidwell
● The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and
Techniques, 3rd Edition: By Wilbert O. Galitz.

31