Week 2: Evaluating interactive design

Now that you
appreciate the issues users have with the
little lemon website, let’s explore
principles proposed by highly regarded designers. You can use these
principles to evaluate the current little
lemon website and use them as you create
your own designs. In the next couple of minutes, you will learn to describe popular evaluation methodologies
in UX and UI design, as well as explore how these evaluation
methodologies can be applied to improve
your designs. Design like food is subjective. What might be beautiful for someone may not
suit others tastes. But just like food, there
are some rules we can follow to ensure enjoyable
experiences for customers. If you are mindful
of these rules at the point of ideation, that means before designing, you can save yourself
a lot of time. Serving customers fresh
food with clean utensils, and providing users with
visually engaging and usable product designs are not entirely all that different. Another thing to consider is
the beauty of functionality. Consider a sign-up form. Sure, it’s not the most
beautiful looking design, but it can function beautifully. Not everything that is
beautiful is functional. On the other hand,
not everything that works well looks beautiful. Functionality should always be prioritized over aesthetics. Now try and consider
something that’s easy to use that also looks great,
easier said than done. But there are some evaluation
methods that will help. It’s important to
know that although the guidelines you’re about
to cover are invaluable, you don’t have to apply them
in a very detailed way. Instead, use these
broad recommendations as aids to spot bad habits before they happen
and think about more usable alternatives that
satisfy these guidelines. More importantly, being mindful of these points
early on saves time, money, and helps you to create more useable solutions
in the long run. Let’s begin by discussing design evaluation
methods where it all started and whose methods influenced the world of UX, UI. Dieter Rams was a German
industrial designer and academic and very influential
in the world of UX, UI. His designs have a long
lasting appeal and are still valued and influence
designers today. He wrote the 10 good
design principles, which serves as a good evaluation methodology
for all designers. Another important methodology is Jacob Nielsen’s 10
usability heuristics for user interface design. All of these are
specifically relevant to human computer interaction,
also called HCI. This methodology has some
overlap with Rams’ principles. The final method of design is the American computer scientist, Ben Shneiderman’s eight golden
rules of interface design. It is named the
Schneiderman evaluation. Again, there is some overlap with the other methodologies, so make sure to explore the
evaluation cheat sheets provided as readings to guide what you may
consider as problematic. Make sure to evaluate
the form flow against these principles and try to prioritize the
biggest offenders. You should now be
able to evaluate various designs using the
principles of good design. In this lesson, you learned about popular evaluation
methodologies and how these evaluation
methodologies can be applied to improve
your designs. Remember, if you are mindful of these aspects at the
point of ideation, that means before designing, you can save yourself a
lot of time. Good job.

Over a 100 million
people who use our apps use different font
sizes and screen zoom. Around another 250k
use screen readers. It’s really important
that we’re giving those people the same
valuable experience on facebook.com that we’re giving to everyone else
who uses our sites to. My name is Katie, I’m
a software engineer on the React Apps team at Meta. Me and my team work on building new features for facebook.com. I hope in this video you
learn the importance of accessibility and
different strategies that you can use when you’re
building a product and when you’re launching
it to make sure that it’s accessible for everyone. There are a few aims that
we have when creating an accessible products
here at Meta. We want our products to
be able to work with a screen reader so
that nonsighted people can use facebook.com the same way that
everyone else does. We also want to make
sure that there are adjustable font
sizes for people who might not be able to
read small fonts. We want to make sure
that there’s a variety of keyboard shortcuts available to those who are
using our apps as well. Accessibility might
not be the first thing you think of when you
go to facebook.com, but it’s certainly
top of mind for the engineers and
teams here at Meta. It’s something that I,
as an engineer, tried to test with every
change that I make, and it’s something
that’s built-in to our core UI components as well. When I’m testing accessibility, I’m making sure that
I’m able to tap through my feature using my keyboard. I’m making sure that
keyboard shortcuts are set up properly. The screen reader is able to properly identify all
parts of the page. Then there are other sitewide
things that we have, like variable font
sizes that are just given for free when
I’m building a new feature. As an engineer, I’m testing
my individual changes. But there are a few
built-in solutions for making sure that products are accessible
across the board. For example, when an
engineer adds a new button if it’s not accessible
via a screen reader a red overlay will actually
appear on the button. That’ll flag to the
engineer that they’re missing an aria-label or some other accessible
components in that button. It’s really easy for engineers
to spot when they’re missing something related
to accessibility. After a product is
built and launched too, we work with accessibility
specialists to make sure that our product is meeting the standards for
accessibility too. We rewrote facebook.com a couple of years ago and we
had to really think about how are we going to make
this site accessible for the percentage of
people who need to use screen readers and
different font sizes. One example of how we made
facebook.com accessible is we actually made
different font sizes default throughout
the entire site. It’s difficult to ask every product team and every
engineer to account for different font sizes when they’re building their products. Luckily, a lot of
our engineers use the same core components
and we actually use a style transform so
that we can globally change the size of
fonts across our site. Now, when users want to specify that they want a larger
or a smaller font, it’s applied everywhere
automatically and engineers don’t really need to think about it when they’re building
their products. I would say that if
you’ve never used a screen reader before
or keyboard shortcuts, definitely do your research
and look into them. According to the World
Health Organization, I think around 15 percent of people have a disability
of some form. It’s really important that
you’re giving those people the same quality experience that you’re giving all
of your other users. It’s definitely super important and you want everyone to
engage with your product. This is a really important step that you can take
to ensure that.

As a UX UI designer, which of the following do you think is important when designing a form? Select all that apply.

There must be clear instructions to complete the form and a password strength indicator.

Correct! The form must provide clear instructions with a strength indicator giving the user immediate feedback on theirchoice.

The language must be clear and specific.

Correct! The language should also be clear and specific to whatever section of the form the user is currently in.

Space the inputs on the form more consistently

Correct! By spacing these inputs more consistently, the user can see that each is unique and what label refers to each input.

You previously learned about
good design principles. They’re usually combined with best
practices as you create your own designs. And this also includes very simple
elements such as a form which can be frustrating if not designed with
the user experience in mind. To illustrate the importance
of good form design, you will cover an example of a log in
form for the Little Lemon website. In this video you will learn more about
the importance of designing good forms and implement best practices to
improve form design and usability. Okay, you might be thinking form design
really isn’t that super obvious not to everybody. The simple fact is that analyzing
interactive forms in the context of usability and
user goals helps you to create logical and user-centered solutions that
all users are familiar with. Understanding the best practice
recommendations of the simple elements that are available to developers and designers helps you to
establish a way of thinking. Sure the behaviors of simple forms and complex interactive components
may be very different but it’s the way you think about designing and
assembling them that is important. These fundamental rules
are always the same. What is really helpful is to check for
best practices and apply them wherever you can. Later on you will find
additional resources and a form design best practice
guide that will help you with a more comprehensive breakdown
of these best practices. Now let’s suppose that you have
taken some of the comments and feedback on board from your previous
interviews and observations. Based on the feedback you
received from the users, you decide to redesign
your form in HTML to test. You then ask your colleague Enzo, a more
experienced UX/UI designer if he would be prepared to voice his thoughts about
the simple prototype you created in HTML. He agrees to this and
signs the consent form. You have tried to improve
the food ordering form. Now let’s explore some
of Enzo’s comments and some best practice solutions that
may help you improve your form. Enzo does not seem to understand what
some of the questions on your form are referring to. He also mentions that the inputs
are very close together and he suggests that you space the user
input fields such as text fields, password fields,
checkboxes and radio buttons. By spacing these input fields more
consistently, the user can see that each field is unique and identify
the labels that refer to the input. You can also implement logical grouping
to make the form more understandable. The payment is separated
from the address and each row is given a subtle
contrast color to differentiate. Enzo also comments that he is
confused in the middle of the flow. He can’t get back and that there’s
no visibility of system status. He states that he has no idea whether he
is close to completing the form or not. Enzo suggests that by implementing a clear
path to completion with a progress indicator, users will see
where they are in the flow. This means that they can even go back
to review the content they entered. Only after entering all his information
was Enzo informed that he had made an error. And he indicated that he didn’t know
where he made the error on the form or what type of error it was. Enzo suggests that your form input should
be validated during the flow of the form. This ensures that the current content
that the user inserts is validated at the time of input. He also reminds you that
the language should be clear and specific to whatever section of
the form the user is currently in. As a UX/UI designer, you are aware that
security is of the utmost importance. Nowadays most websites require that
a password consists of a mix of lowercase and capital letters, symbols and numbers. Enzo remarked that when compiling your
forms, you assume that users were aware of this and provided no guidance for
them to compile their passwords. By not clearly stating
the exact requirements, users were not aware of the problem. He suggests that you provide clear
instructions with a strength indicator, giving the user immediate
feedback on their choice. By asking Enzo to provide feedback on your
form, you have gained valuable insight to help you make the form more accessible and
easier to understand. You should now be more
familiar with form design and how to use feedback to enhance your
form on the Little Lemon website. In this lesson you learned about the
importance of designing clearly defined forms and implemented best practices
to improve form design and usability by using a clear layout with
distinguished fields and sections. And finally, by aligning your client’s
business goals with the user’s goals to help you get closer to
a successful product design, great job.

A design system is a set of reusable pre-made design components and patterns that can be used to design products at scale. 

True

Correct! A design system is set of reusable pre-made design components and patterns that can be used to design products at scale, for example, Google’s Material Design and IBMs Carbon Design sytem.

As the UX UI designer for
the Little Lemon restaurant website. You hear about the current component
driven nature of product design. So you want to learn more about how it
can help you improve some of the website components. In the next couple of minutes you will
learn to describe component driven products and design systems and explain how their application can
create captivating user interfaces. Now you may wonder what
a component is in UI design. In simple terms a component is any part of
your design that can be logically grouped which is thought of as stand alone and
can be reused. Let’s explore how you build a component. First you start small and
build one component at a time. Then you combine components to
create a more complex component and finally you build interfaces using these
individual and combined components. Let’s explore a practical example. Your website probably has
a header on each page. Therefore rather than creating
the header from scratch for every page, you could simply construct
a header component and reuse it. This header component may contain
other components, for example, a button component,
a search bar component and a navigation bar component that
are their own standalone elements. They are used in the header but they could just as well be
reused elsewhere on the site. Think of interchangeable blocks
that you can assemble and reassemble to construct user interfaces. The advantage of assembling the user
interface this way is that design and development work can
be replicated quickly. You can create alternative components for
alternative actions. This will also benefit the users if
assembled well these consistent components will be aesthetically pleasing,
easily learn, able and memorable. Now let’s explore what a design system is. A design system is. A set of reusable pre made design
components and patterns that can be used to design products at scale
similar to a brand style guide. They contain rules and best practice
behaviors for design components. Larger companies can have very detailed
design systems but more about that. Later. There is no set list of items that
must be included in a design system. However, the most successful design
systems frequently have the following features. Design guidelines,
a design pattern library, a UI kit or component library and
finally process design guidelines. Let’s explore what these
are in more detail. First and foremost our design guidelines. These will vary from
business to business and most likely reflect the underlying
values of the brand. So a design pattern library is
a collection of accepted and widely used design patterns or
essential repository and according to the interaction
design foundation. A pattern is the recurrence of multiple
design elements that collaborate with one another. Note that these elements can be shapes,
lines and colors. A UI kit also called
a component library or a collection of UI focused
components consists of buttons. Widget and more. With the aid of these resources. Teams can quickly produce
ui friendly designs and lastly the process design guidelines
is a collection of accepted and widely used patterns such as
a design pattern library. This assists designers in interpreting
design principles while they carry out a task. In this lesson,
you learned about components and libraries that you can use
to design user interfaces. You also learned about the modular
elements that combined to inform a user interface. Finally, you’ve explored
design systems and considered their role in
product design good work.

The current Little Lemon website design, based on all of Tilly’s feedback, violates Ram’s, Nielsen’s and Schneiderman’s design methodologies. How does the Little Lemon website violate Rams 10 principles of good design? Check all that apply.

Makes a product understandable

Correct! The current Little Lemon website design violates Rams principle number 4 “Makes a product understandable.”

Is aesthetic.

Correct! The current Little Lemon website design violates Rams principle number 3 “Is aesthetic.”

Makes a product useful.

Correct! The current Little Lemon website design violates Rams principle number 2 “Makes a product useful.”.

Is thorough to the last detail.

Correct! The current Little Lemon website design violates Rams principle number 8 “Is thorough to the last detail.”

By evaluating the
current Little Lemon online ordering functionality, you can identify issues which offer opportunity
for improvement. You keep Tilly, the
persona developed in a previous lesson in mind
during your evaluation. Say out loud, what would
Tilly think when using this? You should become your persona. Feel free to populate
some artifacts, like empathy maps
and journey maps for your persona when
evaluating this design. In this video, you will evaluate the user interface of the
Little Lemon website, and you will also use
evaluation methods and interface guidelines, such as the good
design principles, heuristic evaluation,
and interface guidelines to redesign some of Little
Lemon’s website features. Tilly is a regular customer of the Little Lemon restaurant. She is hungry and as she loves
to eat from the comfort of her own home while watching her favorite shows and movies, she decides to order
some food for delivery. She opens the Little Lemon
website on her mobile device. She taps the Order
online button. Tilly is immediately confused. The content is
difficult to read. She lands on the
reserve a table page. But she wants to
order some food, not reserve a table. Where is the menu?
She can’t find it. All she can see is this week’s specials
menu and a Greek salad. She wonders if she has
done something wrong, but how can she go back? She doesn’t realize
that the word Menu is tappable nor the Greek salad. There is no indication of that. There was a “Go” button. How is she supposed to
know what go means? Are there no other
meals, she wonders. She decides to tap the word Go, as it looks like it might
take her somewhere. Tilly thinks, “Oh, there are only two menu items, a Greek salad and a bruschetta.” She thinks, “What do I like? Why are testimonials here?” Tilly doesn’t know what to tap or click to order some food. The two actions she
observes are confusing. She sees two buttons. She asks herself, do
I tap “Go” or “Add”? If I tap “Go, will I have more food options as in
the previous screen, or if I tap Add, will I add a Greek salad or a
bruschetta to my order?” Tilly also wants to know
where the basket is. Tilly thinks there seems to be a mix of information
on the screen. She also feels that there are inconsistent button
labels, actions, and designs, and
she wants to know why there was no “Add”
button on the bruschetta. What does your persona
think of this design? Now, let’s evaluate it by using Ram’s 10 principles
of good design, Nielsen’s heuristics, and Shneiderman’s eight
golden rules. Remember that you cover these evaluation
methodologies earlier. Tilly states that the text is difficult to read in some parts. This is not very
aesthetically pleasing, nor is it understandable,
or thorough. It seems ill-conceived. She wants to know why there was a button to reserve a table. These issues violate Ram’s
Principles 3, 4, and 8. Number 3 states that good
design is aesthetic, and Number 4 says that good design makes a
product understandable. Finally, Number 8, affirms
that good design is thorough down to
the last detail. Nielsen’s heuristic principle. Number 8 has also been violated, which states that interfaces
should not contain information that is
irrelevant or rarely needed, as in reserve a
table in this case. Let’s explore some
more issues that Tilly raised on the
Little Lemon website, and if these issues
violate any principles. Remember, Tilly’s comments that the word menu looks like
part of a sentence, and that it doesn’t
give any indication that is or the Greek
salad is tappable? She also commented that
the Go button doesn’t seem like a button or part
of the Greek salad section, and that the bruschetta text to the right is mostly hidden, and there was no
navigation or basket. These issues violate Ram’s
Principles 2, 3, 4 and 8. Number 2 requires
that good design makes a product useful, and Number 3 states that
good design is aesthetic. Number 4 says that good design makes a product understandable. Finally, Number 8 states that good design is thorough
down to the last detail. These issues also violate
Nielsen’s heuristics Number 1, 4, 6, and 8, which are Number 1, the visibility of
system status where the design should always keep users informed about
what is going on. Number 4 that states, consistency and standards
where users should not have to wonder
whether different words, situations, or actions
mean the same thing. Number 6 states recognition
rather than recall, where you minimize the
user’s memory load by making elements, actions, and options visible. Lastly, Number 8 requires aesthetic and minimalist design. Not only were Ram’s and
Nielsen’s principles violated, but also Shneiderman’s golden rules of interfaces
Number 1, 7, and 8. Let’s explore these
in more detail. Number 1 is strive
for consistency. Number 7 states that the
design should support the internal locus of
control that allows the users to be the
initiators of actions. Number 8 requires that
the design should reduce the user’s
short-term memory load. Having identified these
best-practice violations, consider the redesign of these two screens and maybe
consider asking yourself, what would Tilly want? Now that you evaluated
the Little Lemon website, you know the issues that violate important design principles, this should help you create a better design that will
make customers much happier. In this lesson, you evaluated the Little Lemon
website taking Tilly, your user persona
into consideration, and you also used
evaluation methods, such as the good
design principles, heuristic evaluation,
and interface guidelines to identify UI flaws. Great job.

Content design involves presenting the content on your website in a meaningful way that will promote your products. It helps to align your client’s business and UX goals and assists in aligning your content around your personas and scenarios. 

True

Correct! Content design involves presenting the content on your website in a meaningful way that will promote your products. It helps to align your client’s business and UX goals and it also assists in aligning your content around your personas and scenarios. 

Now that you’ve identified the navigation
issues with the Little Lemon website, let’s explore best practices
you can use in the redesign. You’re beginning to feel confident
about your design work and each time you iterate and
test you get valuable feedback. And even though it’s repetitive, it’s
helping Adrian achieve his business and user goals. You’re also starting the field that
you’re improving each time you iterate. Some of Tillie’s feedback like
I have no idea where I am, got you thinking that this has to do
with content and how it is organized. You really want to solve this,
let’s get into it. In this video you’ll learn how
best to consider your content and structure with usability in mind. You’ll also learn navigation best
practices regarding information architecture and content strategy. You already learned that you must keep
an open dialogue with your users. In the field of UX design,
there are several ways to achieve this. There are two broad methods you can
consider to make your users feel comfortable and
know where they are at all times. The first one is content strategy, and the
second one is information architecture. It’s worth noting that these
methodologies are deep and rich. And in this course you will
cover an introduction and apply some of the key principles. Which you should explore the information
in the additional resources readings to gain a greater understanding
of these concepts. Content strategy involves presenting the
content on your website in a meaningful way that will promote your products. And it helps to align your
client’s business and UX goals. It also assists in aligning your content
around your personas and scenarios. A broad rule of thumb is to think
about structuring your content under the headings of prioritization, which
is how you determine your content and its relevance to your users. Next is organization. This is the framework for grouping
labeling and other related content so that users can find what matters to them. Then, presentation is how pieces of
content are assembled to form what a user sees. The final one is specifications,
which is the content requirements for each content piece. Information architecture can be used to
find out what you need to know to design good navigation. The information for larger websites
may need to be structured and indexed in a certain way
to support good navigation. But in this case a simple card
sorting task will help you. In the card sorting exercise, you write
all of the individual elements that you want to include on the site,
on posted notes. You then ask your potential users to order
them into logical groups that make sense to them and group results. This can be done on a table, or a wall to
group cards within sections like menu and about. The website navigation can be
organized into five sections. Home, About, Menu,
Reservations, and Order Online. Home is an introductory
summary of the site, whereas About has some information
about their produce ingredients, the brothers, grandmother’s story and
a link to social channels. Menu has an up to date printable breakdown
of a traditional restaurant menu. Reservations is for table reservations and
Order Online is for ordering for delivery. This navigation bar is known
as a primary navigation and will sit on top of all pages. A hierarchy and the order of elements such
as the navigation bar helps to create meaning and
a sense of place in your product. The navigation bar elements have a strong
influence on the sense of place and this will be present on all pages
to reinforce the site structure. Your navigation is at the top of
the Little Lemon website page, which is a familiar model. The navigation has room to breathe and it isn’t clouded with other information or
graphics. The colors should be contrasting so
that the links stand out. Your pages navigation now looks like it
can be used to navigate to other pages on the website and the links are not hidden,
they look like links. If the user is on a certain page,
that link will look active with a heavier weight or different color and
an underline. The logo will act as
a link to the homepage. A footer at the bottom of the page will
also contain links to all individual pages and social channels. On the mobile version, due to lack of
space, you decide to use a hamburger menu. When it is clicked or tapped, it opens a side menu which displays
links to the other pages on the site. Thanks to your comprehensive evaluation
and redesign of the Little Lemon website, you are helping Adrian achieve
his business and user goals. In this video, you were introduced
to information architecture, content strategy and website navigation and
their role in product design, good work.

Congratulations. You’ve reached the end of the second module
in this course. Let’s take a moment to recap on some of the key
skills you’ve gained. First, you learned how to evaluate interactive
design in UX/UI and should now be able to name and explain evaluation
methods in UX and UI design, including Rams’,
Schneiderman’s, and Nielsen’s. Then you learned how to identify the best practice
principles in design. Now that you’ve
completed that content, you’re able to explain the importance of
good form design, implement best practices
to improve form design, describe component driven
products and design systems, and explain how component
driven products and design systems deliver
captivated audiences. You then moved on
to learn how to evaluate the Little
Lemon website. Having completed that part, you’re now able to evaluate
the Little Lemon website, use evaluation methods and interface guidelines to redesign the Little Lemon website, evaluate your content and structure with
usability in mind, and name and explain
navigation best practices regarding information architecture
and content strategy. To this point, you
should now be able to evaluate UX/UI designs, apply best-practice
UX/UI principles, describe component driven
products and design systems, and evaluate a website based on the best practice
UX/UI design principles. Great job.