https://www.oreilly.com/library/view/usability-engineering/9780125184069/chapter-25.html
https://www.oreilly.com/library/view/usability-engineering/9780125184069/chapter-32.html
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/ch01.html#designing_for_people
https://www.oreilly.com/library/view/97-things-every/9781492085164/ch34.html#learn_the_difference_between_ux_and_ui
Topic 1: First Look at UX/UI Design
This week, you are learning about the fundamental principles of user interface design. You are also exploring how the user experience is driven by the interface design. You also looked at the different types of user interfaces.
Discussion: Select a user interface to critique. You may choose the type of interface to critique (i.e., website, app, AR, VR, tablet, smartphone, smart TV).
Question 1: Include a few screenshots/images of the selected user interface to provide your peers a look at the user interface. Briefly describe the purpose of the user interface.
Question 2: Run a quick heuristic evaluation on the interface. Discuss your initial thoughts on the design and experience using the interface.
*These recommendations and overall experience are based on on your opinions. Later on we will back the recommendations with research.
Minimum Topic Response
PLEASE RESPOND IN THREE OR MORE SENTENCES PER QUESTION.
Note 3: Please make sure you answer EACH question (#1, #2, etc.) so that I can easily check that each question has been answered.
Note 4: Please do not attach a file to the discussion–enter your reply into the text area provided.
Note 5: After you post your response, please review it to make sure it is formatted correctly and is easy to read.
Week 1 Overview
User interface (UI) is any method or means by which the end-user of a product interacts with, or controls, a product, software or hardware device. User interface is designed to allow humans to control machines effectively and efficiently, and good UI should make the interaction between the user and the product as smooth, effortless and enjoyable as possible.
A UI designer is responsible for how a product’s design and graphical features are laid out, as well as how the user interacts with them. They decide which elements should be placed where, which functions serve the user’s purposes best, and how to implement cohesive visuals for consistency. UI designers typically work with Photoshop, Sketch, and similar tools.
User interface design refers to the process of creating interfaces in software, applications, or hardware. It places an emphasis on achieving a high standard of presentation and functionality that users find accessible and aesthetically appealing.
This week you will explore the fundamentals of UI/UX design.
“Designers are not users.” — Jakob Nielsen
Week 1 Learning Objectives
By the end of the week, you’ll be able to do the following:
- Identify the differences between usability and user experience.
- Identify and define key terms related to user interfaces and user interface design and implementation.
- Identify and describe various types of user interfaces.
- Describe and explain the user-centered design process.
- Explain the concepts of user experience, user interface, and usability.
Lesson 1 Foundations of UI/UX Design
The user interface definition is a one that many people struggle with. This is because of the confusion regarding user experience vs. user interface. To make sure that you can differentiate the two, you have to know what each of them mean. User experience (UX) focuses on the overall experience that someone has on your website while user interface (UI) is focused on the overall look and feel of a website. The two design elements work hand in hand and sometimes overlap, but UI design is more about how a website is presented in general in terms of style and interaction.
User interface design involves the process of making something look a certain way or have a certain style while maintaining strong functionality. It focuses on connecting your visitors to your website with aesthetically pleasing design elements. UI design also gives people clear directions on how to navigate your website and search through each page of information while clearly displaying relevant calls-to-action so that decisions are simple and straightforward. It includes all of the buttons and breadcrumbs of navigation alongside interactive lists, toggles, and icons.
“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience.”
— Jakob Nielsen
Define: User Interface
User interface, or UI, describes the way in which a human interacts with a machine. Though technically something as simple as a light switch could be considered an instrument of UI, most modern references relate to computers and other electronic devices.
UI makes the exchange between users and machines possible. Without it, this vital form of communication ceases to exist.
There are four prevalent types of user interface and each has a range of advantages and disadvantages:
Command Line Interface
The command line interface is no longer common as a form of basic user interface in everyday consumer products, but it is still in use under certain circumstances. Command Line Interface requires users to type appropriate instructions into the command line. The computer is commanded to first go to the required file or directory. From there, a whole host of commands become available, from retrieving files to running programs.
Advantages:
- Simple structure
- Minimal memory usage
- Great for slow-running computers, or those low on memory
- An expert CLI user can give commands and perform tasks much faster than when using an alternative UI type
Disadvantages:
- Difficult to learn command language
- Complex for novice users
- Minimal error message information
Menu-Driven Interface
The menu-driven user interface provides you with a range of commands or options in the form of a list or menu displayed in full-screen, pop-up, pull-down, or drop-down. An ATM is an example of a menu-driven interface.
Advantages:
- It is not necessary to remember a long list of manual commands
- Simple interface for novices
- Self-explanatory
menu options
Disadvantages:
- Slower for experienced users
- Limited menu options
- Often requires you to access multiple menu screens to perform simple functions
Graphical User Interface
The graphical user interface, or GUI, is the type of interface with which the majority of people are the most familiar. You interact with these interfaces by using a mouse, tack pad, or other peripheral to point and click on graphics or icons.
Advantages:
- Self-explanatory
- Easy to use Memorizing command lists is not necessary
- Allows for running multiple applications, programs, and tasks simultaneously
- Solid support facilities
- The similar format among different programs adds familiarity WYSIWYG makes for easy design and formatting
Disadvantages:
- Uses large amounts of memory – although this is less of a concern as computers get more powerful
Touchscreen Graphical User Interface
The touchscreen GUI is very similar to the regular GUI, except that you use your fingers or a stylus to select icons and perform tasks, rather than a mouse or trackpad. Touchscreen GUIs are commonly found on tablets, smartphones, and medical devices, like the t:slim insulin pump. The touchscreen GUI has the same benefits and disadvantages as standard GUIs, but also offers a more intimate method of interaction. The lack of peripherals makes touchscreen GUIs very convenient.
Of the four types of user interface, the graphical user interface is by far the most common, followed by the touchscreen variation. Despite the alternative technologies that already exist and continue to emerge, the GUI remains the preferred standard. This is largely due to the simplicity and ease of use.
Graphical user interfaces are easier for most end users to understand as the icons and menus are generally self-explanatory and the GUI does not require the user to remember or input complex commands.
While they do take up considerable memory space compared to other UIs, this is a secondary concern as devices continue to have larger, more efficient storage than their predecessors.
Voice User Interface
Interactions between humans and machines using auditory commands. Examples include virtual assistant devices, talk-to-text, GPS and much more.
Form-based User Interface
Used to enter data into a program or application by offering a limited selection of choices. For example, a settings menu on a device is form-based.
Importance of the User Interface
User interface is important to meet user expectations and support the effective functionality of your site. A well-executed user interface facilitates effective interaction between the user and the program, app or machine through contrasting visuals, clean design and responsiveness. When designing a UI for your site, it’s important to consider the user’s expectations in terms of accessibility, visual aesthetic and ease of use. An optimal mix of effective visuals and efficient responsiveness will improve your site’s conversion rates, as it anticipates the needs of the user and then satisfies those needs.
More specifically, here are the most important overarching elements of a great UI:
Information Architecture
Information Architecture: The functionality of a site is built according to the IA. Structuring and organizing your website’s content in a logical way is important to help users navigate the site with minimal effort. Components of IA include three main types of organizational structures: hierarchical (level of importance), sequential (logical order of steps) and matrix (in which the user chooses the organization of the content they see).
Example: Navigation elements (buttons, tabs, icons), labels (terminology), search features (search bar) and organization systems (categories).
Interactive Design
Interactive Design: Elements of ID aim to turn passive readers into active participants by presenting instances of user input. Keeping the user in mind while creating the UI will help to improve the interactivity and execution of specific behaviors that satisfy user needs. Additionally, efficiently-designed interactive UIs can ‘learn’ to anticipate and remedy any problems that may come up before they negatively impact the user’s experience.
Example: Social-share features, toggles, buttons.
Visual Design
Visual Design: The importance of your site’s aesthetic value cannot be underestimated. Effective design utilizes color, contrast, font, video and photo elements to attract visitors and make it easy for them to read and works with the content, rather than around it, to create a logical, intuitive flow of functionality.
Example: Contrast, color, white space, typography, mobile optimization.
Common UI/UX Terms
There are many terms floating around this field. This course is primarily about user interfaces – the part that interacts with a person, using input and output — and the property that most concerns us about those user interfaces is usability. Human-computer interaction is a common term for this field of study.
Note that because we’re focused on interaction, we won’t be talking much about ergonomics — the weight of a smartphone, how well a mouse fits your hand, the feel of a car seat.
User Experience (UX)
User Experience (UX) – all aspects of a person’s interaction with a software application, including actions, responses, perceptions, and feelings
User Interface (UI)
User Interface (UI) – the set of inputs and outputs that the user interacts with to invoke the functions of an application
User-Centered Design
User-Centered Design – design techniques that embody the view that the user interface appears to be the entire system
Usability
Usability – degree to which a system is easy to learn and use
Human-Computer Interaction (HCI)
Human-Computer Interaction (HCI) – a field of study concerned with the efficiency and effectiveness of user interfaces vis-à-vis computer systems, human-oriented input and output technology, and psychological aspects of user interfaces
Difference between User Interface (UI) and User Experience (UX)
Imagine you’re designing a house. UX would be the foundation, while UI would be the paint and furniture.
In the world of design, there are a few well-known debates that are never quite settled. One of the big ones is the difference between user interface design and user experience design.
While countless analogies explain how these two design concepts fit together, pinning down a definitive answer has proved pretty much impossible.
But if you’re new to the world of design—or especially if you’re interviewing for design positions—having a general understanding of how and when to use these terms is very important.
Recent advances in user interface design now consider the entire user experience as part of the design activity. It is not enough to simply consider the user interface, but the entire user experience is the important design issue.
User interface and user experience are related and equally important to the execution of a project, but the specifics differ. Mainly, UI is designed around the intended look and feel of the site, app or program while UX spans the entire process of conceptualization, development and delivery. Additionally, UX can be referenced in relation to nearly any product, while UI can only pertain to digital products. The main differences between UX and UI are:
- UX revolves around the purpose and functionality of the product, while UI focuses on the quality of the user’s interaction with the product.
- UX involves components such as market research and identifying user needs, while UI has more artistic design components relating to the look and feel of the user’s experience.
- UX focuses on overall project management from ideation through development and delivery, while UI more specifically focuses on the design of the finished product.
a user experience begins by identifying the pain points of the target users and figuring out how to meet the needs of said users. This includes details such as logical flows or steps to take to reach a goal. Once the interface is programmed to be useful, the prototype is sent to a user interface designer, where the processes are made visually appealing.
The combination of UX and UI shapes your entire experience of a product. While two comparable products might get you the same end result, their UX/UI reflects how they provide it. If one of the products has better UX/UI design than the other, people are going to use it more because they prefer the overall experience.
Developing a user experience includes:
Developing a user interaction includes:
Developing a user experience includes:
- Overall execution and goal-tracking
- Coordination with developers and UI designers Integration and analytics
- Content or product strategy
- Wireframing, planning, prototyping, development, testing
Developing a user interaction includes:
- Look and feel of the site/app/program
- Branding and design research
- Responsive adaptation Interactivity, animation
- Implementation
User-Centered Design
The discussion on user interface design must include the entire user experience. The user experience is a broad concept that applies to all aspects of a person’s interaction with the system. The user interface, which is the set of inputs and outputs that the user sees and interacts with, must fit within this larger concept of the user experience. User interface design must consider all aspects of the user characteristics as well as the myriad devices that the user will interact with.
Experienced developers recognize the importance of all aspects of the user interface and recommend using several techniques that place the user at the center of the development process. These techniques are referred to collectively as user-centered design. User-centered design techniques emphasize three principles:
- Focus early on users and their work.
- Evaluate designs to ensure usability.
- Use iterative development.
The early focus on users and their work is consistent with the approach to systems analysis. User-oriented analysis and design tasks are performed as early as possible and are often given higher priority than other tasks.
The goal of user-centered design is usability, the degree to which a system is easy to learn and use. Ease of learning and ease of use sometimes conflict. For example, a system can be easy to learn but be cumbersome to use all day. Usability is not always easy to achieve.
The third principle of user-centered design is iterative development—that is, doing some analysis, then some design, then some implementation, and then repeating the processes. After each iteration, the project team evaluates the work on the system to date. Iterative development keeps the focus on the user by continually returning to the user requirements during each iteration and by evaluating the system after each iteration.
User interface design is, in fact, included in a much larger field of Human Computer Interaction. This larger field focuses on all aspects of efficiency and effectiveness as humans utilize technology to perform their business tasks.
Modern HCI realizes that a user interface (UI) is to be used by users, so it is appropriate that the design process be centered on the user, called user-centered design. McCracken and Wolf list the attributes of user-centered design:
- User-centered design is user centric, not data centric. It involves users as much as possible in the process in creating the interface. Involvement varies from observing users, expert users designing and evaluating the prototypes
- User-centered design is interdisciplinary, draws on knowledge from art, psychology, technical writing, and computer science.
- User-centered design is highly interactive and involves many testing and revisions.
The general user-centered process follows these steps:
Designing
Needs Analysis
Needs analysis summarizes the goals of the interactive system. It gives a general description of the system and identifies the primary users. The document is typically only a paragraph.
User Analysis
User analysis characterizes the people who will use the product and identifies the other stakeholders. The document will identify stakeholders’ goals or how they will be affected by the product.
Task Analysis
Task analysis identifies the tasks and sequence of tasks to achieve the users’ goals. This is a longer document and uses scenario descriptions to describe the tasks.
Functional Analysis
Functional analysis identifies the computer services, deciding what can be automated by computers and what requires user inputs. This analysis is close to a system design. In this document uses cases can be used to describe the functions and division between computer and user.
Requirement Analysis
Requirement analysis is the formal specifications of the system. The document includes object modeling, UML. Requirement analysis may include identifying resources such as data bases and dictionaries. If the software uses a database then entity-relationship diagrams will be included in the document.
Setting Usability Specifications
Setting usability specifications defines how the product will be evaluated, including performance and preference measures. Performance measures aspects of software use such as time to perform a task. Preference measures how satisfied the user is while using the software.
Designing
Designing is the preparation for prototyping. It describes how the product how will look and work. It will include drawings and description of use.
Prototypes
Prototypes can be global or local. Global prototypes depict the entire system at various levels of fidelity. Local prototypes model specific parts of the system. Early prototypes should be low fidelity global prototypes to insure a cohesive general design. Higher fidelity local prototypes can be used to test specific usability. Also prototyping can be throw-away, incremental and evolutionary.
After a prototype is constructed the product can be evaluated by users.
UI/UX Design Process
What does a UX designer actually do? This question comes up time and time again, especially among those considering a career in UX! As a UX designer, it can vary dramatically from project to project. However, the UX design process can generally be divided into four key phases: research, design, testing, and implementation. Based on these phases, UX designers tend to follow a certain sequence for each project: carrying out user research, analyzing their findings, defining user personas, mapping out user flows, creating wireframes and prototypes, conducting user testing, and finally, handing the designs over for visual design and development. Let’s take a look at each step in more detail now.
User Research
Every design process begins with research. But where does research begin in the world of UX design? You guessed it—it all starts with the user! As a UX designer, a user-centered approach is absolutely crucial; you need to understand what your users need, how they think, and how they behave. It’s therefore really important to engage with your users directly and figure out how they tick!
So how do I tackle user research? Usually, I will receive a brief from the Head of Product asking me to conduct initial research for a new product feature. I then start with competitor research to see what’s out there, before moving on to interviews with actual prospective users. I also survey and interview any existing users, as well as product stakeholders, to identify their needs, pain-points, and any opportunities for improvement.
Research is essential as it helps you understand the problem you’re trying to solve. It enables you to identify pain-points and challenges, validate or invalidate your assumptions, find patterns and commonalities across your target user groups, and shed plenty of light on your users’ needs and objectives. Ultimately, research ensures that you’re designing with the user in mind—the golden rule of UX!
User Research Analysis—Affinity Mapping
Having conducted extensive user research, it’s time to analyze your findings and turn them into meaningful insights. In other words, what does the data tell you about the product you’re designing and the people you’re designing it for? At this point, organize all my research—be it audio recordings of interviews or hand-written notes—and start to look for common themes and patterns.
All you need is a whiteboard or a blank wall and some Post-it notes. On each Post-it note, you write down an observation or quote from your research, before grouping your Post-its into similar clusters. The end result is a wall or whiteboard filled with sticky notes and, most importantly, themes that can be used to draw meaningful insights from your data.
User Personas & User Flows
Armed with meaningful insights from the research phase, then get to work on crafting user personas—one of my favorite tasks as a UX designer! A user persona is a fictional but realistic representation of a set of target users based on their goals, needs, and behaviors (all discovered during the research phase!).
A user persona is an extremely valuable tool in the UX design process as it reminds designers and other stakeholders that they’re designing for real people. Rather than designing for user group A and user group B, design for “Jane”, a mother of two living in London, and “Steve”, a recent retiree in the process of relocating to Rome. Can you see how personas help to humanize different target user groups? This helps the designer to build empathy with the user and to prioritize key features and design decisions based on real user data.
Once the personas have been fleshed out, it’s then possible to look at specific tasks that each persona might want to perform—such as making an appointment via a calendar app, or completing an online purchase. From there, create a user flow depicting the path a user like Jane needs to follow in order to achieve her goal.
Wireframes & Prototypes
Once the steps in the user journey have been mapped out, start to define how the content on each page should be organized, as well as how these pages can fit together in a way that’s intuitive and easy for the user to navigate. This is where wireframes and prototypes come in.
A wireframe is like a blueprint, demonstrating the layout of the design and how it will function. A prototype is essentially a scaled-down version of the final product—a simulation or sample version which allows you to test your ideas and designs before you get them developed. Wireframes and prototypes tend to start off as rather basic, low-fidelity sketches, and then, based on feedback and initial testing, will evolve into detailed mockups that closely resemble the final design.
User Testing
User testing Testing is a fundamental part of the UX designer’s job, and a core component of the overall UX design process. Just like user research, it’s important to test your designs on real users; this way, you get authentic feedback from those who will actually be using the product. Testing also makes sense from a business perspective—you’ll catch any major design flaws before going into the development phase, which saves considerable time and money for the company!
The most common type of testing for UX designers is usability testing, which is a technique used to evaluate how intuitive and user-friendly a particular design is. After a few rounds of testing, use the results to improve the design, adjust the prototypes, and test again. This process of continuous testing and improving is known as iteration.
Summary
Business—and life in general—has become increasingly dependent on the internet, web apps and mobile apps. As a result, companies have found that the best way to compete at a web level is to prioritize building an attractive and efficient user interface that optimizes the user experience.
This lesson focused on the fundamentals of user interface design, including types of interfaces, the user-centered design process, and the differences between user experience and user interface.
Skip to main content
-
Sign In
Try Now
-
Teams
For business
For government
For higher ed
Individuals
Features
Certifications
Interactive learning
Live events
Answers
Blog
Content sponsorship
Usability Engineering by Jakob Nielsen
Get full access to Usability Engineering and 60K+ other titles, with free 10-day trial of O’Reilly.
There’s also live online events, interactive content, certification prep materials, and more.
Start your free trial
Usability
Engineering
Figure
6 A
simple calculator operated
by
direct manipulation.
Unfortunately, direct manipulation interfaces may be harder to use
for
some disabled users than the traditional, text-only interfaces
were [Newell
1993].
Users with motor difficulties may have no
problems operating a keyboard with its discrete nature: Even if you
do not hit a key exactly right, the character still appears perfectly
on the screen (and you can backspace if you hit the wrong
key).
In
contrast, direct manipulation is much more dependent on fine
control
of a continuous
input
device, the mouse. As another
example,
blind users cannot see icons and
objects
on the screen and
will
thus
have trouble manipulating them [Griffith
1990].
Consid-
erable
research efforts are underway to solve or alleviate these
problems, using various techniques like audible representations of
the various windows on a screen [Edwards 1988; Mynatt and
Edwards
1992],
but in general it does seem that graphical user
interfaces
are a detriment to this particular category of users.
3.5 Next-Generation Interfaces
The
next generation of user interfaces is already
under
develop-
ment in laboratories around the world [Nielsen
1993a].
It is likely
that the trend from the previous generations will continue, and that
the dimensionality of user interfaces will increase from the current
2.5
to a full 3 (or more) dimensions. Common ways to add a dimen-
sion
to user interfaces include
adding
time (in the form of anima-
tion
[Baecker
et al
1991;
Robertson et
al. 1993]),
sound [Gaver
1989]
62
Generations
of
User Interfaces
or
voice
[Tucker
and
Jones
1991],
as well as a
true
third spatial
dimension in the form of virtual reality systems
[Biocca
1992;
Mercurio
and Erickson
1990;
Pausch
1991;
Rheingold
1991;
Thomas
and Stuart
1992].
Much
of the original vision of highly personal and portable
computing was described in a pioneering article introducing a
hypothetical “dynabook” (dynamic book) computer [Kay and
Goldberg
1977].
Even though current personal computers have
achieved
graphical user interfaces and even some portability, they
are still far from the early ideal, where computers would be as easy
to use and to carry around as books.
The
two easiest predictions regarding the next generation of user
interfaces
are
thus
that they will include higher dimensionality
with more media types and that they will be highly portable and
personal, while utilizing cellular modems and other communica-
tions technology to achieve tight connectivity.
In
addition, it is
likely
that next-generation user interfaces will be
more object-oriented in terms of their functionality and not just in
terms of information manipulation, as has been the
case
with many
graphical user interfaces as discussed on page
58.
Traditional operating systems were based on the notion of applica-
tions that were used by the user one at a time. Even window
systems and other attempts at application integration typically
forced
the user to “be” in one application at a time, even though
other applications were running in the background.
Also,
any
given document or data
file
was only operated on by one applica-
tion at a time.
Some
systems allow the construction of pipelines
connecting
multiple applications, but even these systems still basi-
cally
have the applications act sequentially on the data.
The
application model is constraining to users who have integrated
tasks that require multiple applications. Approaches to alleviate
this mismatch in the past have included integrated software
[Nielsen
et al 1986] and composite editors that could deal with
multiple data types in a single document. No single program is
likely
to satisfy all computer users, however, no matter how tightly
63
Get Usability Engineering now with O’Reilly online learning.
O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.
Start your free trial
About O’Reilly
- Teach/write/train
- Careers
- Community partners
- Affiliate program
- Submit an RFP
- Diversity
- O’Reilly for marketers
Support
Privacy policy
Download the O’Reilly App
Take O’Reilly with you and learn anywhere, anytime on your phone and tablet.
Watch on your big screen
View all O’Reilly videos, Superstream events, and Meet the Expert sessions on your home TV.
Do not sell my personal information
© 2022, O’Reilly Media, Inc. All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.
Terms of service
• Privacy policy •
Editorial independence
Don’t leave empty-handed
Get Mark Richards’s Software Architecture Patterns ebook to better understand how to design components—and how they should interact.
It’s yours, free.
Get it now
Close