Choose the best term that applies to this statement:

Primarily non-visual.
UX
Choose the best term that applies to this statement:
Creates tangible, material results.
UI
Choose the best term that applies to this statement:

Development is driven by user behavior and feedback.

UX
Choose the best term that applies to this statement:
Rooted primarily in graphic design.
UI
Choose the best term that applies to this statement:
Generating solutions to elevate user engagement on a given website.
UX
Choose the best term that applies to this statement:
Making decisions to define the form, aesthetics, and look and feel of a site.
UI
Choose the best term that applies to this statement:
Concerned with how a user chooses to navigate through a website.
UX
Choose the best term that applies to this statement:
Rooted in research, planning and testing.
UX
An interface can be best described as a bridge between:
A user and content
A screen and a system
A website and an app
Two users
Why is it helpful to rely on real world models within interface design? Choose the best answer.
Real world models are already familiar to a user, and therefore can help make the user’s experience
much more seamless.
It’s easier for a designer to borrow an idea or concept that’s already been created.
Real world models are much more believable and users are more likely to consume or buy a product
that uses them.
Which of the following examples are considered real world models?
All of the above.
A screen-based button.
The “trash bin” on your computer.
Camera shutter sound when using a smartphone’s built-in camera.
What is the rule of thumb for organizing content within an interface?
Along a grid
Systematically
Randomly
Alphabetically
True or false: An interface should be immediate and intuitive.
True
Which physical relationship is NOT a factor for designing an interface?
the placement of an on-screen button in relationship to a user’s thumb.
the distance of a user’s eye from a screen.
the scale of a smartphone within a user’s hand.
the relative position of one user to another.
Why is it important for the interface to react immediately when a user carries out an action?
Choose the best answer.
the user needs confirmation from the interface that the system is working.
users are inherently impatient.
the system behind the interface needs to process tasks very quickly in order to keep pace with
competing systems.
Context-specific design is best defined as:
when the designer uses different software programs to make an interface.
shaping a design to reflect differences in content, goals, and users.
what happens when emerging designers make websites.
A method of design that reflects the physical, geographical location where the design was made.

Choose the heuristic that best applies to the following example: the dreaded spinning circle on
YouTube. (video)
Visibility of system status - Correct! While extremely frustrating, this spinning icon and others
like it lets users know that system is working and to standby.
Flexibility and efficiency of use
Help and documentation
Recognition rather than recall

Choose the heuristic that best applies to the following example: an automated chatbot “therapy”
app that sends you warm, positive text messages throughout the day.
Aesthetic and minimalist design
Match between system and the real world - Correct! To help the user feel more at ease with using
the app, the chatbot is programmed to send messages using warm, friendly language rather
than dull or neutral language.
User control and freedom
Error prevention

Choose the heuristic that best applies to the following example: Gmail’s notification when you
have forgotten to attach a document to an outgoing email.

Flexibility and efficiency of use

Match between system and the real world

Aesthetic and minimalist design

Error prevention - Correct! The pop-up notification prevents user error by confirming what they
want to do (attach a document) before the action they requested (sending the email) is
completed.

Choose the heuristic that best applies to the following example: Google’s advanced image
search.

Help and documentation

Recognition rather than recall.
Flexibility and efficiency of use - Anyone can search for images, but an experienced user who
wants to refine Google’s search capabilities can select more options by clicking “Tools”. The
interface can be customized to the needs of both experienced and inexperienced users.
Help users recognize, diagnose and recover from errors
Choose the heuristic that best applies to the following example: The “Like” or “thumbs up”
button across various platforms.
Error prevention
Consistency and standards -
Correct! The heuristic of Consistency and standards relies on the use of platform conventions
and design patterns so that users do not have to re-learn how to interact with the interface. The
“like” or “thumbs up” button has become ubiquitous.
User control and freedom
Visibility of system status

It is more economical to develop.

Website - Correct. Websites are more economical to develop because they do not have to be created
for a specific operating system.
App

It can be viewed across different devices and platforms.

Website - Correct. Websites can be viewed across different devices and platforms using any web
browser.
App

It can be displayed on any device.

Website - Correct. A website can be loaded on any device using just a web browser.
App

It is easy to share content with others.

Website - Correct. Website content can easily be shared through a URL.
App

Its content can be easily indexed by search engines.

Website - Correct. Because a website’s content publicly faces the internet and is accessed through a
URL, its content can be indexed by search engines.
App

It can be integrated into the operating system, allowing for access to advanced device
capabilities, such as fingerprint or iris scanners.
Website
App - Correct. Apps can require the user to grant permissions to utilize device specific capabilities in
order to run.

It can be displayed only on the operating system it was designed for.

Website
App - Correct. For example, an app designed for iOS cannot run on Android, and vice versa.
It is easier to monetize.
Website
App - Correct. Apps are easier to monetize because they can be sold through an app store, and revenue
can also be generated through in-app purchases.

It requires that users download and install it onto their devices.

Website
App - Correct. Apps are downloaded from a platform specific app store and installed before its
content can be viewed.

It’s easier to control how users can interact with and view content.
Website
App - Correct. Apps can require users to interact with its content in a specific way that cannot be
altered outside of the app’s settings.

True or False? Primary navigation menus should always appear horizontally at the top of a
page.
True
False - Correct. The placement of the primary navigation menu should be determined by the
website’s strategy and outline of scope. In some cases, this may determine that primary navigation
menu should be placed vertically on the side of a page.

Look at the image taken of the navigation elements that appear at the top of the Coursera
website.

The profile icon with the learner's name in the right hand corner of the image is an example of:

primary navigation
subsidiary navigation
utility navigation - Correct. The purpose of this profile icon is utilitarian in nature (it leads to
Coursera administrative options) and is located in a typical spot for this type of navigational element.
secondary navigation
Look at the image taken of the navigation elements that appear at the top of the Coursera
website.

Why might have Coursera’s designers decided to permanently place a search field in this area?

Coursera’s outline of scope probably determined that search is an important functionality requirement.
- Correct. This is typically true of websites with large amounts of content that can't all be displayed
on a single page, such as Amazon.
Coursera’s probably thinks that learners like to use the search field as a wayfinding tool.
Coursera probably wants to imitate other search sites like Google.
Coursera is following a website design rule which dictates that every website should have a search
field.

Look at the image taken from a science course's description page on the Coursera platform.

This section, titled “You May Also Like," is an example of what kind of navigational element?
Related content - Correct. This section contains courses that are related to the science course from
which this screenshot was taken, as indicated by the title "You May Also Like."
inline links to other pages
index of pages
search results for other pages
Look at the image taken of the navigation elements that appear at the top of the Coursera
website.

What navigational system does the blue “Explore” button use?

primary navigation
subsidiary navigation
secondary navigation - Correct. The "Explore" button contains a drop-down menu with links to other
areas of the website.
utility navigation
Looking at this page on the CalArts website, which of the following wayfinding functions does
the blue CalArts logo in the upper-left corner of the image accomplish?

Select all that apply.

It lets learners navigate back to the CalArts homepage.
Правильно Correct. The CalArts logo is clickable and takes users back to the home page
(calarts.edu) no matter where they are on the website, which is linking back home function.
It lets learners see the path they have traveled within the CalArts website.
It lets learners see where they are on the CalArts site.
It lets learners know what page they're on.
It lets learners see what site they're on. - Правильно
Correct. It provides a visual brand identity for the site.

You have an important message that you want to share with the users of your website through a
site alert. In which of the following sections would it be the most appropriate for the site alert to
appear?
Header
Sidebar
Footer
Content

You want to deter visitors to your website from copying or re-using your content by posting a
copyright notice. In which of the following sections does a copyright notice usually appear?
Sidebar
Footer
Content
Header

Your website's business has multiple sponsors who are important contributors to the business
and need to be recognized as such, but you don't want the placement of their logos to supercede
your own. In which of the following sections would it be appropriate to ads or affiliate links for
these sponsors?
Content
Header
Sidebar
Footer

What is the advantage of an accordion on a website? Check all that apply.

The user gets a scannable overview of the scope of information.
Complex, lengthy information can be presented in a more compact way.
You can play German folk music with it.
It lets the user open and close content buckets.
It makes pages that are really long to be scrolled.

A client that runs a candy company has asked you to build a pop-up survey on their website to
determine which of their top 8 chocolate bars have users consumed in the last year. Which of
the following would be the most appropriate form element to collect this information?
Checkbox - Correct. Checkboxes would allow users to select all of the chocolate bar types they have
consumed in the last year, whether it be one or all eight!
Radio
Dropdown menu
Text field
Number stepper

A beer company has asked you to design a landing page for their website to ensure access is
restricted to users aged 21 and up—the landing page will prompt users to enter their birthdate.
Which of the following would be an appropriate form element to use?
Date picker
Radio
Dropdown menu
Button
Number stepper

A software company would like to survey users about what mobile operating system they use
most often—Android, iOS, Windows, or “Other”. Which of the following would be an
appropriate form element to use?
Checkbox
Radio
Dropdown menu
Text field
Number stepper

An organic farmer has enlisted your services to help her augment her online ordering system
for her restaurant clients. She would like her users to be able to choose a specific quantity of
fresh produce from a list of what will be harvested that week. Which of the following would be
an appropriate form element to use?
Radio
Text field
Number stepper - Correct. Since the question is asking users to choose a specific quantity, a number
stepper would be the most appropriate form element.
Button
Data picker

Fill in the blank: Hierarchy is created through _______. (answer is one word)
Contrast – correct. Applying principles of contrast, such as scale, weight, or texture, to the most
important elements on a webpage can help draw attention to those things first.
On the homepage for Wealthsimple.com, which of the following principles of visual contrast is
used? Click all that apply.

Color - Correct! Color provides a lot of cues here, from the bright accents on the design floating on
the right of the screen, to the yellow call-to-action button on the lower left.
Texture
Space - Correct! This website uses space very effectively. There's room to breathe, and a sense of
depth as the circular design recedes into the background.
Direction - Correct! The bright red diagonal traveling across the page definitely pulls your attention
On the homepage for Neamedia.fr, which of the following principles of visual contrast are used?
Click all that apply.

Direction
Weight - Correct! Bold type turns a a simple link into a convincing call to action.
Scale - Correct! There are clearly bigger and smaller elements, which creates a contrast of scale.
Color - Correct! Color is used very effectively here, from the utility menu to links to title graphics.
Texture

Why is it important to consider whitespace in web design?

It helps make text appear smaller.
It creates drama in a composition and leads the user’s eye around. -
Correct! Whitespace is a very effective tool that helps to give elements on the page more breathing
room and makes the user experience more pleasurable.
It allows you to use up as much space as possible given your website has the ability to scroll infinitely.
All of the above.
True or false: Hierarchy enables a designer to guide a viewer's attention equally to all of the
elements on the screen.
True
False - Correct. Hierarchy enables us to guide a viewer's attention to the most important elements on
the screen.
True or False: Whitespace must always be white.
True
False - Correct! The term 'white' in the word 'whitespace' does not refer to the actual color of the
space, but rather the empty space in between elements.

What is an important difference between print and web that designers should remember?
Print design should incorporate more whitespace.
Web browser controls limit the amount of whitespace that can be seen in between elements, which is
not a problem in print.
Nothing. Modern technology has made the differences between print and web design minute.
Space in print is limited, while space in the web is infinite.

Why isn’t it a good idea to justify body type on a web page?

They are not compatible with screen readers for users with vision-related impairment.
Web browsers are not very good at hyphenating text at this point in time.
It makes the text look weird at different screen sizes.
You risk making columns that are too wide to read easily.

According to the lecture, what is the suggested minimum body text size?
12px
16px
20px
28px

As a general rule of thumb, about how many characters should be on a line?

40 to 70
60 to 90
50 to 80
70 to 100
True or false: You should always stay away from free web fonts.
True
False - Correct! Free web fonts can work well for any website.

How do you calculate the ratio of text height to line height?

Add the font size to the line height.
Add the line height to the font size.
Divide the font size by the line height.
Divide the line height by the font size.

What’s an argument against using true black text on a true white background throughout your
entire website?
It looks boring
It can cause screens to wear out faster.
The high contrast can cause eye fatigue. - Correct! It is better to use off-color hues instead, for
example off-black with off-white.
It can cause the text to bleed into each other.

What is a reason mentioned in the video for making text larger on desktop screens?
People tend to view desktop screens from a greater distance compared to mobile screens. - Correct! A
desktop screen is typically viewed at arm-length distance.
Desktop screens have more space to display text.
Mobile screens are not able to display text at large sizes.
People who use desktop screens tend to have poor vision.

What should you always do when selecting a web font for your site?
Make sure the web font is freely available, and if not, obtain a web license for it.
Look for the typeface first on your computer.
Export the typeface to an image file.
Avoid Arial, Courier, Georgia, Verdana, or Times New Roman typefaces.
VISUAL ELEMENTS OF USER INTERFACE
DESIGNWEEK 1

What is the actual user interface itself and how does it work?
The key components are the user and the interface. The user is the viewer or the personinteracting
with the content and the interface is the way that the user gets to that content.the interface as being
a bridge between the user and the content. But that bridge is not totally passive. That bridge can
shape the way the user experiences the content. The medium can shape the message. And that
medium is the interface. the interface shapesthe experience. interface designer is shaping every
experience that everyone has. And this gets at the heart of what we're going to look at next: the
interface shapes the experience. And the interface is the UI part, the user interface design. And the
experienceis the UX part, the user experience design.

The Relationship Between UI and UX

UI it's about how it looks(INTERFACE)visual design,

UX it's about how it feels (EXPERIENCE)non-visual design.
Visual design is much more rooted in graphic design, a non-visual design might involvemuch
more research, and planning, and testing.
UI form aesthetics look & feel organization.
UX feel navigation story structure.
UI surface visual identity (design driven)
UX content engagement (user driven)UI
visual design (tangible,physical) UX
experience design (propositional) Visual
design
Social science
Audience driven
form Design driven first (UI) (user,form,sees,first) It means that the designer makes all of those
initial decisions about what the interface looks like, about how the interface works, before they've
even got feedback from the user. user sees the form first. The designer is the person that develops
content specific form by looking at that content, andfiguring out what is the best form, what is the
best structure, what is the best interface forthat particular content, and for that particular idea that
I want to communicate to a user.

Roles in UI/UX

Front end UI design (interface design) visible to the user and involves interface design. user is
going to see on the screen
Back end CODING (programming) back end is much more invisible, and it's hidden fromthe user.
Ideation deals with coming up with an idea, figuring out how your website is going to work,what its
goals are, and testing deals UX DESIGN with getting feedback from an audienceat an early stage,
which might shape both the programming, and the interface design aswell as the ideation.
Fixed experience (real world)

Screen experience outcome

Customer atm get money

Transfixed experience (digital world)

Real world knowledge is based on analog models. For example, we understand the functionality
of digital buttons on a screen because we’ve experienced analog buttons inthe real world—on
calculators, remote controls, elevators, and so on.

Learned behavior If real world knowledge is based on analog models, then perhaps youcan say
learned behavior is based on digital models. For instance, swiping left or right is a digital
convention that is now fairly common among plenty of apps, but has no corollaryin the real world.
It is an action users have picked up from using smartphones and the apps on them.

Cause and effect is about action and reaction. When a user presses a button and something
happens, they quickly understand the functionality of the button. For example,pressing “Send” to
send an email message, or “Submit” to submit a form.

Consistency is about applying a systematic logic to the way interfaces look and functionso they
remain familiar to a user. For example, on a telephone keypad, where all of the numbered buttons
look the same, you can anticipate that pressing the number “8” will have more or less the same
function as pressing the number “1”.

Seamlessness is about ensuring that the action and reaction are closely linked. The interaction
should be easy (with as few steps as possible), and results should beimmediate.

Immediate intuition We’ve been conditioned that in order to interact with an interface weneed to
touch it in some way. While the system may not be immediately obvious, the solution is usually
quickly discovered.

Fulfillment is the payoff for the user! An interface should function as it was intended, butthere are
other ways to reaffirm it as a positive experience. Anyone who uses Mailchimp to send email to a
list of customers is likely familiar with the “Freddie High Five” that appears after you send a
campaign.

Undo/redo gives the user peace of mind that their actions are reversible. A good UI will allow a
user to change their mind after they’ve made an action, or at least notify the userbefore they take
a crucial step. You can see a few examples of this in Google’s webmail service, Gmail, from
notifying you if you’ve possibly forgotten to attach a document to anoutgoing email, to giving you
a short window of time to “undo” a sent message before it leaves your outbox.

Template vs Content

Template=convention
template≠content . The template doesn't take content into account. The template is content agnostic
and while this offers a level of functionality, it also offers a level of predictability and sometimes
that experience means it's not that exciting.
 ONE SIZE DOES NOT FIT ALL. A template can be very useful in terms of its functionalitybut it
has to be modified in order to take certain kinds of content into account or on the other hand, the
template could be ignored entirely and we could take some of those conventions and turn them into
a much more content specific design. what you're buildingan app or website or an interface for and
trying to think about what is the best kind of interface possible for this kind of content. And we
often call this context specific design, because it's taking into account other things as well as just
the content. Context specific design has a relationship to specific content.
Aesthetics & Functionality
˅ ˅
How it looks how it works
To use some of the same language we've already looked at, the aesthetic part of the interface design
is about giving the interface a sense of individuality, where as the functional part of the interface
design is about giving it some familiarity,
WEEK2

Design Before Design

"WHAT'S IN A BRIEF?" A brief often describes what the project is, what its goals are,and
how it's going to work. involves looking at content, context, and audience. important to know
that our goals, constraints, platform, audience
client determines: goals,constraints,platform,audience.
Know your project, be the expert!

Look and Feel Look and Feel

Style and Mood

Style frames & Moodboards

Envisioning the overall design direction part of Pre-design

Visual strokes pre-production, produced anything is pre-commitment, pre-the big bucks UI

DESIGN ALL OF THIS

Envisioning desig=imagine the design

A lot of ways UI designer is trying to visualize the

invisible and this is one of the most important skills that UI designers have.

Language as a design tool Words

as TONE/ATTITUDE

Words as NAMING/BRANDING
Scientific
Playful
 Animated
Friendly
Entertaining
o Language AS a Design Tool
o Language IS a Design Too
o Language sets mood and ton at EVERY level

Color & Shape

Color As Mood
Black and white serious design
Yellow and black danger design
Bright color (magenta) fun design
Color As Navigation
Active(touch/hover)
Activated (press/click)

Imagery
Imagery In Interface Design.

The most common use of imagery is as content in your app or on your website, but we can also use
imagery to create a mood, or we can use imagery as part of our navigation, or part of our interface
system.

IMAGERY AS CONTENT
Contained imagery: videos & search engines & all image in boxes
Immersive imagery: games& apps & animations
Imagery as content contributes to imagery as mood
imagery as mood can also be imagery as navigation

Typography in UI

Type as content
o Why do we read on screens, when we have video/audio?
 Text is language made physical
 Text is fast
 Text is accurate
 Text is economical
 Text can represent what cannot be depicted
o Texting is more physical
o Texting is faster
o Texting is (less) accurate
o Texting is more economicl
o Texting can be depiction (emoji)

EX; Wikipedia

Type as interface
 o Why do we need Type as interface when we have icons?
 Type is language made physical
 Type is fast (to read)
 Type is accurate/clear meaning
 Type is economical
 Type can represent what cannot be depicted Type
in : menus,names,buttons,instructions EX:
DEMOCRACY (GOVERNMENT,POLITICS)
Type as branding
o Type as connotation
o Type as identity/individuality

Connotation+individuality=branding

Ex: logotype (google,Adidas,Netflix)

Modular/system Google (G)

Bug/buttons Netflix (N)

Type matters

Icons
Icons&symbols

Both represent other things…

Icon (PICTORIAL) does that by showing us a picture of the thing. It shows us a visual
representation of it that is relatively realistic compared to what the object is.
Symbol (NON-PICTORIAL) doesn't necessarily look like the thing that it represents. So, for
instance here's music and it's represented by notes.
o Icon depiction (literal) (known)
o Symbol representative (learnt) (meaning)

What makes a good ICON ?

Communication (ideas+aesthetics)
Functionality (technical)
Audience (user gets it!)
Recognition (saturation+simplicity)

Words as TONE/ATTITUDE
Words as NAMING/BRANDING

Scientific
Playful
Animated
Friendly
Entertaining

Language AS a Design Tool

Language IS a Design Too
Language sets mood and ton at EVERY level

Color & Shape

Color As Mood
Black and white serious design

Yellow and black danger design

Bright color (magenta) fun design

Color As Navigation

Active(touch/hover)

Activated (press/click)

How exactly does color function as a formal element in a user interface?

It can help define the mood or attitude of the product articulated through the
interface.
It can help define how a user would navigate or interact with an interface.
All of the above.

Shapes
Interface elements
Design elements
Primarily functional look and feel
1 курс - Неделя 3 Visual Elements of User Interface Design

Some of the advantages of having a slimmed down, scale down interface, are, first ofall, that
is very simple and direct.

A high level of clarity creates a low level of user mistakes.

Where are the benefits in that system and where are the downfalls? The benefits seem mostly to
be, not in the content itself, but in the experience of accessing that content.

Speed and Style

Functionality - logical, functional, and familiar all at the same time, but that doesn't mean
it has to look boring. The overall design is clean and simple.

There's a refrain made popular by Golden Krishna, that the best interface is no interface at all.
The best interface is the one that has the best relationship to its content, the one that's the most
sympathetic. So, the best interface is one that is visible and invisible at the same time, but in the
right proportions.

Composition and Structure

Overarching design concerns trickle down to really affect every aspect of the user interface
design. They affect decisions about content, about composition and about structure. If you're
designing a button, one of the first things to think about, is what size it should be. You should
also consider the shape of the button. You could think about how color works with your set of
buttons. A common strategy to let the user know that abutton is a button is to give it some
dimension to make it feel like a 3-dimensional objectthat has to be pressed or interacted with.

Buttons

A button is just a self-contained object that is interactive, that you can click on or interactwith, but
it only works as a button if the user knows that it's a button, in other words if it's not just a shape.

Not Buttons

All simple fast functional means of interaction. We can use shape, scale, contrast, clarity, and
economy in order to reinforce and emphasize the goals of speed and function. We're having to
negotiate that balance between aesthetics and functionality. If you think about links for
instance, there's a clear and simple way to show a link. The simplest way is just to underline a
piece of text and this is so prevalent and so ubiquitous and just the simplest way to do
something complex that it's become an absolute convention that we all use and understand
very, very quickly.

States and Changes

A button has to have different states so it can convey to the user the fact that it's being
interacted with.

So, first of all, a button can let the user know it's a button by having some kind of statechange.
So, the user knows it's not just a static element, it's an interactive element.
Secondly, a button can also change states to acknowledge the user's action, in other words, to
let the user know that their tap or click has really worked.

Stages of button: normal. Hover, press, Inactive.

1 курс - Неделя 4 Visual Elements of User Interface Design

Ui overviews: Content, context, audience, look and feel, language, functionality.

Ui elements: Color/shape/pattern, imagery, typography, icons/buttons, navigations: menus/

links/fields.
Hierarchy of Content

We have these two kinds of hierarchies that are going to affect our content and affect our design
structure: intention, function. There are navigation elements in the interface, such as the
timeline, or categories, or the search field, that are lower down in the visualhierarchy.

Conventions and Expectations

The web is often more concerned with the content that's in the structure than the structure
itself. That structure quite often has to be functional and fairly invisible.

Structure and Grids

Mobile device: focus on single task, because multiple screens.

Computer screen: focus on multi tasks, because single screen. More elements to organize.
Content: grids, spacing, scale, systems, contingency. Computer screen focuses on design-
centric process (big decisions)

Each of them has their own scales.

2-курс: UX Design Fundamentals:

This course provides half the foundation of knowledge you need to work with UI/UX, the UX or
user experience half of the equation. If you’ve already taken visual elements of user interface
design, the first course in the UI UX specialization offered by CALart, youwill be able to
combine your knowledge from that course with this one. This course focuses on UX and it’s less
concerned with the graphic user interface and much more concerned with how the designer
shapes the user’s interaction and experience. This course examines how content is organized and
structured to create an experience for auser. We will use a condensed process as a roadmap for
developing UX design from start to finish.
Intro to WEEK 1: Ideation, Articulation and Development
We are going to divide our UX process up into 4 chronological stages, and these 4 stages are
going to offer you a roadmap for how to progress from ideation all the waythrough to a finish
digital prototype.
We described UI as how the digital experience looks, and UX as what that experience feels
like. So, UI is based much more in visual design, and UX a little bit more in non visual design.
With UI, we focused more on form, aesthetics, look, and feel, and organization more graphic
design principles. With UX, we are going to look much more at the intangible aspects of
interface design: How things feel, how our navigation works, what our story in structure is. UI
ends up being a little bit more about the surface, it’s design driven. UXtends to work more with
thinking about the user’s engagement.
UI- design driven; UX – user driven.
While will separate UX from UI as a way to get a little bit of focus, it’s never truly separated of
course. As we keep saying, they are intrinsically informing each other. So,while UI ends up
being a liitle bit more tangible and UX ends up being more propositional, we need both of these
aspects of design if we want to be a good UX/UI designer.
Good ideas:
Where do ideas come from? They come from client/ employer and YOU!
You can really use your imagination to come up with a fantastic idea, and your idea, the content,
the content can be something that really lends itself to visual exploration. It does not have to be
something that already exists or that conforms to current norms.
You are going to have ability to shape the content of your app and to shape the experience, as
well as shaping the idea. You will really be in control of everything. That sounds great, but
you’ve still got to come up with a good idea.
Where do good ideas come from? Good ideas quite often come from good problems. Then you
need a good process. You need to be able to take that problem and solve it with your app in
good way. That’s going to mean figuring out exactly how you solve the problem. You are going
to need to be able to focus on exactly what it is within that problem that you can solve with an
app, as well as exactly how you’re going to solve it. So, think about a good problem being one
that’s a real problem. You want a problem that’s actually a problem, and one that can be
solvable by app. Sometimes it’s okay that there’s not an app for that, but when you do have a
real problem that can be solved by an app, you can tell it success rate by how users respond to it.
So, let’s say we come up with a fantastic idea for an app that solves a real problem. It
isn’t really worth anything unless we can use a process to develop that into something more
than just an idea. Ideas are cheap, and chances are that 50 other people have thesame idea as you
for an app. What’s going to make yours different is your process. Youare going to need to do
research in order to see what’s already out there, and figure out what the best solution could be.
You are going to need to do testing, so that you can make sure that it’s really solving the
problem for your user base. You are going to need to be willing to revise and change your app in
its form and ideas as you go through this process of development. Think of a good idea as a car
that you’re driving.
Good process is the roadmap that you’re going to follow to get to your destination, and your
destination is a fantastic app.
But you’re not going to get there unless you stay focused and don’t wander off the track.So, there
are some tools for focus that you can use along the way. You can clearly articulate your ideas on
what you want to do so your goals are clear. You can retain that clarity of intention through every
aspect of your process, and you can check to see if your app is really doing what you think it is,
by testing it with users and getting feedback. GOOD FOCUS-> ARTICULATION-> CLARITY-
> USER FEEDBACK
The blank screen is a blank slate, and you can fill it with anything that you want to, and there is
plenty of nonsensical and idiotic stuff out there. You must define that the problem is as well as
what your solution is.
What’s the idea?
Let’s start out by trying to provide a simple service that users actually desire. Your app could
pretty much do anything you want it to, and they can have whatever attitude you want it to as
well. It might be very serious and solve a real problem, or it might be fun. Ideas & Goals:
What’s my app?
It’s okay if a similar app already exists, because you are going to deal with it in a
different way.
Firstly, Try and be as specific as you can, try and articulate your idea as clearly as you can.
So, on the one hand you want to really expand your idea, you want to try andexplore all the
different possibilities that it could have, but you also want to look at those possibilities and
decide which ones you’re going to use, which ones are really relevant. These 2 activities
(expand & explore, refine & edit) seem like they’re almost inopposition to each other, but when
you put them together you have a process and that process helps you develop your idea. It’s a
simple strategy in a lot of ways, it’s figuring out what questions to ask and then answering those
questions.
Broad questions-> specific answers-> specific representation what my app is. And this is going
to make it be different from all the other apps that do the same thing.
It is useful to create a hierarchy of the function of your app. Our hierarchy function is also a
hierarchy if ideas. We’re going to spend a little more time articulating that big idea, but all of
our other ideas won’t go away, they’re just hiding behind the big idea, they’re still there and
they’re going to provide a supporting role, but they’re a little less important than our main
idea.
If we’re clear on that big idea, it’s easier to convey to somebody else what our app is really all
about, and one of the ways to do this is to come up with a really tight and accurate one-line
description. You can use the prefix My app…, and then think about how to fill the rest of that
sentence in. So, you could think about how you use language and tone to describe your app, but
also just the words themselves having no wasteful orextraneous language there. Think about the
specifics of each word.
4 big questions that I asked you earlier about your app:
1) What does it do?
2) How does it work?
3) Who benefits from it?
4) Why would someone use this?
We’re going to turn each of these into a class to try and help you to answer these
questions:
Ideation\articulation
Research & Development
Audience & Rationale
Goals & Outcomes
User Research:
Let’s look at what kind of research we should do and let’s look at how we might develop our
idea a little bit further.
Chances are, that if you have a good idea for an app, several other people have also
had that same good idea. So, one of the first things that you can do is to check out the
competition. It might help you to categorize what other kinds of apps you’re going to look at.
The most obvious place to start is apps that do exactly the same thing as theidea that you have.
Even there’s not an app doing exactly the same thing, I am willing to bet that there are plenty of
apps that do something similar. And these might contain important information about what to
do or what not to do with your app. These first two categories are very strongly related to your
idea but let’s what happens when you move your circle of search out a little bit further. You
could look at what kind of apps are adjacent to yours. What apps might have the same broader
subject matter but not have the same specific subject as yours. And then you could also look at
apps that are totally unrelated to your content and your idea. By looking in all these areas,
you’ll get obvious predictable research, but also tangential, unexpected research.
Let’s try how we might develop our idea a little bit further. The process of developing your idea.
Think about your idea as being amorphous, think about it as being a blob or an amoeba that can
change its shape. Your idea should not be rigid, it can be manifested in a lot of different forms
and a lot of different structures, it’s still your idea. Inother words, how someone sees and
experiences your idea. One way to decide on what shape your idea should have is to ask yourself
a series of what if questions:
What if my app was entirely image-based?
What if my app connected to a food delivery service?
You can always say no to any of these ideas that you come up with. But what’s important is that
you test out your idea and you come up with a bunch of different options. Ideas are pretty much
free. They just take your time and a pencil and a piece of
paper. So it’s worth mapping out all the possibilities, all the different ways that your idea could
be manifested. And it’s worth doing that now to find out what the right direction is because right
now your ideas are free, but your idea can take whatever shape you want it to. As we just saw,
there’s many different shapes the same idea could have. By thinking like this, you’re exploring
your options, and you’re trying to discover what is special about your app, and what is original
about your app. I do that listing everything that my app could do. I like to do that on a giant piece
of paper so that I can see all my thoughts on the paper and react to them. It also means I can
come back to them and decide whether they’re really good ideas or bad ideas and if I can’t
decide that for myself, I can very easily test the waters for my ideas by talking to somebody else,
by bouncing my ideas off another person. In a way, even at this beginning stage, you’re getting
user feedback. It’s the same strategy we’ve already seen of being broad and being focused at the
same time. The broadness comes from you extending the parameters of your thought, trying to
open your mind to ideas that you might not initially have thought of and trying to widen your
scope of what you thought was a good solutionto the problem. Because once you’ve laid out all
the possibilities, every single way that your app could be represented and everything that it could
do, then you can examine allof that material, all of those ideas. And decide precisely which of
those ideas is the best.Audience and Rationale
So, we’ve started to develop and also focus our idea. Even at this early stage, it’s worthus
thinking about our audience and our rationale for our app because that might have some
overarching consequences for what our app does and how our app works. So, all4 of our
questions have an effect on one another. We are going to ask:
1) Who benefits from my app?
In order to figure that out, we have to figure out who’s the audience for my app. And it’s no
good saying, everybody. So it’s worth defining what your target audience is:
2) Who is my initial user target group?
After defining, it could be divided into categories or into personality traits to try and define the
user even more closely. So, the first set feel like they’re much more political considerations.
Second set feels like they’re more financial, they’re all to do with budget.The third set could
loosely be described as being social to do with the activities around cooking and eating. Fourth
set is functional.
Let’s try and use the same structure that helped us define our user target group and think about
how it might help define the rationale behind why someone would use my app. Our larger
descriptions of the personality traits of our user will probably stay the same, and so will our
categories: political, financial, social and functional. But let’s lookat rationale or motivation in
our user. Their political motivation might be to make a difference, to be green, whereas the
financial motivation would be as simple as saving money to be thrifty. The social motivation
might be a little bit more tricky. It might be about being creative, but it might be also about
community, discovering and sharing recipes’. The functional motivation is relatively easy; to
save time. By following this process, we’ve managed to obtain a much more detailed
description of our audience and of our rationale. We’ve been inventing our users but we’ve also
been inventing ourusers’ concerns, and if we just stick with their interests, we are going to
design something that is entirely user-centric in its design. That’s just one part of the equation
that we have to consider as UI/UX designers. We also have to consider our own knowledge as
designers and how we’re going to create design centered design. But there’s a third aspect that
we don’t always think about, and that’s about the client.
They’re also going to have a set of goals and a set of intentions that we’re going to have to figure
out how to deal with.
Goals and Outcomes (for the Client\Designer)
In this section, we’re going to look at some of the goals and outcomes that we want tohave for
our app. We’ve asked main questions and new we’re looking at why would someone use my
app? Now we are going to ask what are my goals? My goals as the client and as the designer.
So we’re changing focus from the people that are using theapp to the people that are making
the app. And sometimes those sets of goals align.
Goals as the maker are not that different from the users goals. They still fit into political,
financial, social, and functional categories. And all of goals are interconnected and
interdependent upon each other. So you are going to have to figure out where the emphasis of
your app lies. Because that’s going to have a lot of knock-on effects in terms of how your
content is structured and how you want to shape the user’s experience as they travel through
your app. It’s important to remember that all of the goals and outcomes in your app are all tied
to each other and all affect each other.
Naming and Mission:
Branding with words. Three different places where we can use words as a branding tool. The
most obvious is in the name of our App. But we might also need a tagline andthe mission
statement. The name is the smallest thing that you’re going to have to dealwith (1-2 words).
Tagline is a short sentence, while the mission statement can be a few lines or paragraph. These
three pieces of language are also different in terms of the goals:
Name must be memorable, original, appropriate, to have a right tone\ mood and sound.A tagline
is an expansion of that, where you want it to be catchy, succinct, to be a summary of what your
App does; to have a right tone\mood; a soundbite. Tagline could be a clever description of what
you do or a phrase that sums up your philosophy.
The mission statement is longer still, a few lines or a paragraph. It gives you a chanceto get
much more descriptive about what your App does; you could talk about the ambitions, or the
achievements of your App; need to have a right tone\mood.
Naming, tagline and mission need to all be related to each other in terms of content and
philosophy and how they use language.
In general, the language that we use for our naming might be much more creative, and much
more connotative. While the language we use for our mission might be much more factual,
much more descriptive.
WEEK 2
Mapping, testing and envisioning:
App idea consists of name, user profile, goals and tagline & description.
Three stages in process: app idea, envision and prototype roughly translates as being non-
visual, semi-visual, and then visual. In idea phase we’re really using words to describe
everything that we were thinking about. Our middle-stage will still use words,but it will use
also devices like maps, sketches, and diagrams. In visual stage we are developing the user
interface and using it to create final designs to put into a working digital prototype.
Mapping content:
Mapping Content help you figure out the scope and structure of your app as well as what is
going to where in terms of your content. Your content map can look and feel anyway that you
want it to. There is no industry standard. Your map has to make sense, especially since you
might be showing it to other people to explain your app. Qualities that your content map should
have:
-clarity
-hierarchy
-modularity
-growth potential
Generic content plan:
Homepage – splash page or ID page
We are using color as a coding system to let us see similar kinds of event or content. As we are
mapping out our content, we’re also thinking about structure, and we’re also developing the
functionality or our app. We are just creating a structure and a framework and making
decisions about the content.
Mapping interaction:
The interaction map shows how the user travels through your content. So it is much more
like a flowchart in a lot of ways.
You cant map the user’s path with generic content, because the user doesn’t know what they’re
making a decision about.
Content map and user flowchart are interwoven together and they affect one another,
but they show slightly different information.
Mapping interaction: we are showing how the user travels through our content in the different
paths that they can take. But with content map we are not making any decision yet.
We could take this framework or structure and develop it in any number of different
directions. While it might look and feel different, its structure would be the same because while
we are mapping out these interactive pathways, we are also mapping out the structure of our site.
There are connections between our interaction flowchart and our content map. There are
similarities between two things, but they focus on different kinds of information and
experiences and they don’t actually contain the same information.
User flowchart is trying to envision the experience without any finished visuals. It is
focusing more on UX part of the equation.
Content map acts as a diagram, showing us where all our content is going to go, while
interaction map acts as a flow chart showing us how a user would interact with that content.
Both of these maps help us to develop our idea, structure and thinking, problem-solving.
User Testing:
Developing paper prototype is something that we can do on our own. That’s kind of internal
stage
The second stage is testing it on a user. That’s kind of eof xternal stage
The tester’s job is to act as the app and to give the user a series of options for them to choose
from.
The user’s job is to make decisions about the options and give them back to the tester. While the
loop is going on, the tester’s job is to observe the user to see which decisionsthey make, but also
to see how easy or difficult those decisions are.
The user’s job is to make those decisions and to give the tester information when needed or to
tell them when there’s an issue. Both the user and the tester are trying tofigure out how the app
works. The user is doing this in an active way by making decisions and telling it to the tester.
And the tester is doing it in a passive way by observing what the user does.
Creating Sitemap
Sitemap is basically a more developed version of content map. Wireframes are generic sketches
showing what goes where on each frame. Visual direction is concerned with the design and
aesthetics of user interface. Developing any one of these areas is going to have an effect on the
other two.
Visual direction is first

3rd course. Web Design: Strategy And Information

Week 1
UX(USER EXPERIENCE)…The experience a product or service creates for people in thereal
world.
Experience (amazing,charming,horrible,boring,delightful,confusing,frustrating) user
experience design is,= (at its heart,) user-centric.
user-centric design=understand humans. As user experience designers, we need to take the
anatomy, psychology, and behavior of users into account at every step of the design process.
EXAMPLE: Which hand do most people use to hold their phone? Does it matter if they are right-
or left-handed. How big does a button need to be in order for us to comfortablyclick or touch it?
How large should text be for a comfortable reading experience? What about people that can't
distinguish between certain colors? How many things can we concentrate on at once?
Web Designer
If “designer” is in the title, the job is designing. Literally deciding and implementing how websites
look and work. “Web” is in the title because the job is specifically focused on theweb. Specific
skills would be design-tools-of-choice, HTML, CSS, and light JavaScript.

If the job is also designing for print, apps, signage, products, clothing, etc., the title would be
widened to Designer.

Front End Developer

This job is focused on HTML, CSS, JavaScript, and light backend work. Not design. The lack of
“designer” in the title is intentional. Because the job doesn’t require design, deeperskill in the other
technologies is implied. You likely have a grasp on some concepts beyond the core technologies,
for instance, regression testing or performance.

A synonym might be Front End Engineer. I tend to think of that as a requiring a deeper and more
specific skillset, possibly with more narrow focus or at a higher level.

Technology specific job titles may be also be appropriate here, like “JavaScript Developer” or
“JavaScript Engineer” for a job where that is primarily what needs to be done. Although, none of
the front end technologies live in a bubble so I generally prefer Front End Developer.

UI Designer
This job is more about designing and less about implementation. Really good at design-tools-of-
choice with perhaps only light HTML and CSS skill. A synonym might be a VisualDesigner.

UX Designer
A specific focus on studying and researching how people use a site. Then ushering changes for the
better through the system and testing the results. May not have or need any design or
implementation skill. All jobs should care about user experience, but this job lives it.

Interaction Designer
Primarily design, just like a UI Designer, but with specific focus on how things are used and
movement.

Art Director
The job is quality control, leadership of other designers, and client communication. A synonym
could be Design Director.
Web Developer
This job is focused on back-end work and working with languages specific to the web, like PHP,
ASP, Ruby, Python, etc. Medium skill in database/server work, medium skill inJavaScript, light
skill in HTML. This is very different from a Front End Developer as thereis little working with the
design and heavier on programming concepts and concerns, likesecurity and structure.

Synonyms could be Web Programmer or Web Application Developer.

Full Stack Developer

This job is a combination of front and back end work. Seriously, though, not mostly one and a
little of the other. Good crossover people are needed at organizations and this is ahigh-end job.

Content Strategist
Rather than working directly on implementation, this job is about the structural design ofwebsites.
Things like the taxonomies, metadata, scheduling, and analysis of content. A synonym might be
Information Architect. They might work with people who work with content in a more general
way like a Writer, Copywriter, or Editor.

IT Technician
This job works with the actual computers and tech equipment. A hardware person.

Dev Ops
The job bridges the gap between IT and Developers. They handle things like server software,
version control, deployment, build processes, and testing servers/processes. I wish this had a more
job-title-y feeling to it. As it stands it sounds like what you would callthe whole team of people
with this job.

Product Manager
This job is about guiding the site as a whole (or a major feature of the site) toward a betterfuture.
Largely dealing with people and planning. A Project Manager would be similar butsmaller in scope
and possibly a temporary role rather than full job title.

Customer Service Representative

This job is about communicating directly with users of the site to provide help. Then triaging
bugs/problems to the internal team. Also understanding/communicating the voiceand vibe of the
community around the site.

SEO Specialist
This is a big enough sub-industry that it can be its own job.

Job Title Prefixes

Any of these job titles can be prefixed with Junior or Senior. Junior meaning less skill/experience.
Senior or Lead meaning more skill/experience. Responsibility and pay commensurate. The tech is
the same.

Consultant might be suffix to any of these job titles as well, like a Front End Development
Consultant, in which you offer strategic advice and help.
What could possibly go wrong?
The UX Process
You know exactly what to do next instead of just “winging it”
You keep the client involved and accountable
You design choices are based on predefined goals and target audience You
figure out what you are building and what not
You have a greater chance to stay sane and have fun

The UX Phases

STRATEGY, OUTLINE OF SCOPE, SITEMAP, WIREFRAMES, VISUAL MOKUPS

Strategy what are our goals, who are our users, what are their needs. strategy phase also includes
a visual research.
OUTLINE OF SCOPE list of content and functionality
SITEMAP, content and functionality from the previous phase is structured into a cohesivewhole.
Here we also determine the navigational structure of the site and we'll make sureto use precise
labels for the navigation categories.
WIREFRAMES are a simple sketches of the structural makeup of a web page. wireframesto show
how we imagine the navigation menus to work on big and small screens.
VISUAL MOKUPS= visual identity. colors and typefaces you'll figure out how images aretreated.
Maybe you create textures or icons or illustrations.
At first you're dealing with very abstract matters. And along the way things become moreand more
concrete.

one project phase neatly flows into the next. The reality, however, is often a little bit moremessy.
There should be flexibility to change decisions made during an earlier phase that later turn out to
be untenable.
Waterfall vs. Agile

One phase follows the next and in the end there's a big launch. It's just like a waterfall
where the water starts at the top and plunges down in a rather linear fashion
agile more like the wheel of a water mill. The agile process is circular and iterative. Instead of
planning for one big launch at the very end of a long process, there will be many launches along
the way. The goal is not to get everything exactly right the first timebut to get something in front of
the user as quickly as possible. With the agile process the product is never really done.
MVP (Minimum Viable Product ) it means that companies should focus on all the aspects of a
product that are absolutely vital.
Web vs. App

A website is accessed through a browser via a website address or URL.An app

on the other hand, is downloaded and installed onto a device.
Websites
Any operating system
Any device
Any screen size
Any browser
Open and democratic
An App
Native to specific devices
Restricted and controlled

Advantages for app Disadvantages for app

Complete integration into OS Users need to install app
No extra UI from browser gets the way Gatekeepers (apple,google,Microsoft)
No reliance on browser capabilities Pretty expensive to develop
Easy monetization
Prestige

Advantages for website Disadvantages for website

Easy to access(via URL) Browser limitations
Cross-device, cross-platform,screen size Harder to monetize
agnostic
Links Websites can be hacked
Search
More economical to develop

Bottom line
Everyone needs a website, not everyone needs an app

WEEK2
The most common tool used to track user data is Google Analytics.
User needs and client needs should provide the foundation of every decision in the UXdesign
process.
User needs …. Users are the people that will access the sites. their needs as visitorneeds, or
customer needs, or a target audience needs.
YOUR JOB IS TO REMIND THE CLIENT ABOUT THE ‘USER’ IN ‘USER
EXPERIENCE’
Client needs….The client is the business owner or the director of an organization. It'sthe person
in charge, the one who hired you to design their website
THE CLIENT WILL LET YOU KNOW THEIR NEEDS

User segmentation
Roles, Demographics, Psychographics, Experience
Roles groups of people with similar goals
Job seeker
Job lister
 Potential user
Existing user
Parent
Student
Faculty
Demographics Basic statistical data
Gender
Age
Education
Marital status
Income
Location
o Example: female
o 405-50 y old
o College degree
o Single
o Annual income $60-100k
o Lives in Los Angeles
Psychographics personal values and interests

Personality
Attitudes
Lifestyles
Hobbies
Example
o Liberal
o Vegetarian donaes to the aclu
o Interested in DIY
o Drives a prius

Demographics influence psychographics, but do not predefine them

Experience User’s level of experience with the site’s subject matter
Expert
Newbie
Die-hard supporters
persuadable
User personas
User personas are short imaginary biographies of people who embody representativemembers
of your target audience.
Fictional characters that embody exemplary members of your target audience
You basically make up fictional characters who will be used as stand-ins for a larger usergroup.
You give them a name and even a portrait photo.
Breathing life into dull statistics

3rd course. Web Design: Strategy and Information Architecture. Week 3

Introduction to Outline of Scope

The second step of the UX process is outline of scope (scope of the site).

Strategy becomes scope when user needs and client needs are translated into specific
requirements for content and functionality.

The user needs and the client needs that we established earlier, directly inform the content
and functionality requirements of the site.

The strategy phase:

Why are we creating something?

Example: Promote new movie

The outline of scope phase is using the insights gained to answer the question: What are
we building?

Example: website that includes information about the movie, the cast, screenings, pressarticles,
the trailer, and lets people sign up for a mailing list.

At the end of the outline of scope phase, the specific requirements will be simply listedin two
columns. One list for content, and one list for functionality.

There are many constraints on a project, like the timeline, and the budgets, andtechnology
constraints.

The difference between content and functionality

Content

Website is an information delivery platform that lets you access written text, images, recordings,
movies, and files. Those are fairly straightforward and passive ways of interacting with the site.

Functionality

Task-based is a system that process user input.

The reason why we are making two separate lists for our requirements are, that content and
functionality requirements are fundamentally different.

o Content is less complex.

o Functionality is more complex.

User needs:
Get questions answered
Content Requirement – phone number, email address, social media links, employeedirectory,
FAQ section
Functionality Requirement – contact form, live chat, community forum, product reviews.

User needs:
How much is shipping?

Content Requirement – list shipping prices

Functionality Requirement – shipping calculator

For each content and functionality requirement you should ask:

Does this fulfill a client need?

Does this fulfill a user need?

Constantly refer to your strategy document.

Other questions that will influence your decisions are about the feasibility of a specific
requirement:

Is it feasible technologically, time-wise, and budget-wise?

Content (text, images, audio, video, and files)

Most websites need logo, contact info, about us text.

An e-commerce site could also use product images and product descriptions, featuredproducts,
pricing info, shipping info, customer reviews and Frequently Asked Questions.

A movie site would probably include the movie trailer or press kits, headshots and bios.

A restaurant would list the food menu, ingredients, opening times, directions, maybe the
company history.

A school needs class descriptions need the academic calendar, event info, employeedirectory,
annual report PDFs, and maybe blog posts.

A podcast website could post their podcast audio files and show notes.

A portfolio website would include an image gallery, and case studies, and "Our Clients"section.

Some sites are required to disclose their privacy policy and list side credits.
Functionality (Task-based system that process user input)

Some of these are pretty common, like sorting, and filtering, and searching.Others you

will find on many e-commerce sites like a shopping cart,

and a checkout system, and an order history.

There are some functionalities that require others to be implemented as well.

Once you have user authorization, you need to think about how people will create anaccount
and recover a lost password.

Once you have user comments, you need to think about the need to police these
comments.

Other items in this list are less common like color correcting images, PDF creation, and
location-based content.

But what all of these items have in common is that, they don't simply describe contentbut
complex systems that allow users to complete certain tasks.

Outline of Scope example

Pasadena Conservatory website

User need:
Who’s on the faculty?

Content- list of faculty members, faculty biographies Functionality –

filter faculty list by instrument, search faculty list.

User need:
What instruments are available?
Content – information for each instrument, icons for each instrument

Functionality – questionnaire: how does a child decide which instrument they should learn
is not what we need because it takes time and resources.
Week 4. Sitemap

In the sitemap phase, we are very much concerned with the structure of information.

Sitemap is about defining hierarchy and sequences for options to be presented to users.

The sitemap, in a way represents the table of contents for our website. It's an informationflow
diagram that includes a bunch of boxes that are connected with lines and arrows.

As the table of contents for our site, the sitemap will show us what to include for the main
navigation. To illustrate this, let's quickly add some example content into this sitemap sketch.
Here, you see that everything starts with the homepage and there are four first- level pages;
products, about, cards, contact. Well, if this is our sitemap, then we will wantto use these four links
for our main navigation bar

Information Architecture

As long as people had to communicate information, they had to make certain choices onhow to
structure that information.

In the context of a website, you can define information architecture as categorizing, organizing
and labelling information to allow users to move through a website effectively.

“Information architecture is deciding what the choices are, what they are called andwhere
they take you when you click” - Christina Wodtke

Sitemap Concerns

How many clicks does it take?

o Is it always best to have the least number of clicks?

 o But we shouldn't conclude that a lot of clicking is always a bad user experience,
sometimes it might be wise to present a series of well-structured pages instead of one very
complex page.

Clicking vs. scrolling

o Some simple sites might be just one-pagers.

o Scrolling is at the heart of website as a medium – don’t be afraid of it.
o Think about the most popular websites, Facebook, Amazon Google Search, there is
a lot of scrolling involved in navigating those sites.

How many choices to present to the user?

o The average short-term memory can hold 7+ or – items.

o Limit the amount of choices we present at one time to 5-9 items.

What are the choices called?

o Create clear, unambiguous labels

o Use language of target audience
o Uniqueness vs clarity

Why is it suggested that menu items should contain no more than 5-9 items? Because a
human’s average short term memory can only hold 7 (plus/minus 2) items at a time.

Sitemapping: an annotated process

The first step would be to sort these items into sections of related content.

The main level items order should make logical sense and also indicate importance.

Note that the Featured products and the Products sections, both link to Product Details and the icon
for product details looks a little different. It's a page stack to indicates that there will be many
different product detail pages.
The same happens with the Blog Posts, there are many different Blog Posts that all link from the
Blog landing page.
Note that instead of using simple lines we have arrows to indicate the sequential order ofthese
items.

Sitemap Elements

The simple rectangle represents a page on your site.

o Today the term ''view or content node'' might be more appropriate for sites that relyheavily
on dynamic content being loaded.
 o Think about Google Maps for example, it's hard to think about that site as having
individual pages.

Page Stack is indicated with three overlapping rectangles.

o You will use a page stack to account for multiple pages of similar content.
o Product detail pages, news items, or blog posts.
o These pages will often also share a common visual template
o Usually there will be a landing page that will link to these detail pages symbolizedas a
page stack

Special content

Connectors tell us which pages are connected and how we get from one page to another.
o You can also use arrows to indicate a sequence of pages that must be
completed in order.
o You can use a dotted line to indicate that a connection is based on a specific
condition.

Decision point can be a helpful tool when you're trying to account for paths in theuser's
journy that depend on certain yes-no conditions.
Treejack Introduction

Treejack is a tool that lets you test your sitemaps information architecture and solicit feedback
from actual users. It's developed by the company Optimal Workshop Out of New Zealand. They
actually make a few other helpful tools for UX designers such as firstclick testing tool and tools for
card sorting, surveys, and questionnaires.

Treejack is a tree testing tool or put another way, an information architecture validationsoftware.

Web Design: Wireframes to Prototypes-4 (3-4)

The last phase of the UX design process culminates in static visual mockups or clickableprototypes.
Prototypes are great but they are no actual websites that users can visit in their browsers. A
functioning website needs to be coded. HTML, CSS and JavaScript arethe main technologies that
make the web work. Web technologies, HTML, CSS, and JavaScript are the medium for web
designers. So, quite literally in order to create customwebsites yourself, you need to know these
technologies.
Advantages of knowing code:
-Understand the affordances and limitations of the medium
-empowers you to make real things
-communicate better with developers
-design with code

HTML-Hyper Text Markup Language

Simple tags that define structure and content

CSS-Cascading Style Sheets

Determines the presentation (the look and feel) of webpage

JS-Javascript
*A programming language that t allows for more interactively on websites
*showing/hiding/replacing elements, form validation, loading new content
*triggered by events (something the user does: moving the mouse, clicking a link, leaving a
webpage)
*client-side code
*much more difficult to learn than html,css

jQuery-JavaScript library
Often much simpler to use than pure JV
Better cross browser compatibility

Server side coding (php,micro.net,nodg)-page content is created on the serverdynamically(on

the fly ) depending on user input
*code is un on the server side (Also called back end coding)

Databases (SQL server, MySQl,mongoDB)

CMS-Content management Systems (joomla,drupal,facebook)

*sophisticated back end functionality make it easy to update a site
*plugins offer extensibility
 *great starting point for dynamic, interactive website (blogs, user comments, user
accounts, e-commerce)

Web browsers
*internet html, css and JS
*watch out for (slightly)different interpretation

Summary:
HTML Content and structure
CSS Formatting
JavaScript Interactivity
jQuery Easier, more intuitive JS
Server Side Coding (eh PHP) Dynamic content Content
Mana Systems CSM Easy to update website Web browsers
Display and navigate

Since HTML, CSS, and JavaScript are fundamental languages for web design,
*talking about the differences and why we have three different languages.

HTML vs CSS
*The HTML code is related to the markup that is in the title, the hypertext markup
language, and the CSS that is related to the style
*Html Deals with content, while css deals with how that content is presented. Html
deals with the question, what is it? is it a title, an image, or a paragraph?
CSS deals with the question, what does it look like? What color is it? How big is it? Whereis it
located? and all that stuff
HTML Is a kind of noun in the language, and
CSS is an adjective
the job of HTML is simply to say what the content is. so, this is the ball. it's almost like theplatonic
idea of a ball. there is no other description. it's just a ball. But CSS is able to describe the ball
visually.

HTML CSS
Markup / Style Content
/ Presentation
That HTML works without CSS, while CSS is completely dependent on HTML and does
nothing by itself. So HTML always comes first, and then how it's presented visually comessecond.
This makes sense because visually impaired people also access the internet withscreen readers, and
screen readers mostly access the information provided by HTML and ignore CSS. You can even
make this argument more powerful. If CSS is about presentation, then it's about visual design, and
obviously visual design is really important. HTML is the markup, and CSS is the style, then
JavaScript is the script that is in the title,or you can say that it is programming.
If HTML is content and CSS is presentation, then JAVASCRIPT is behavior.
JavaScript may be acting a bit like a verb.
JavaScript actually does in the context of a website, is that it changes the HTML or CSS
after the page loads. That is all HE ever does. It can add new HTML to the document orchange
the CSS of the element to make it look different.
HTML defines the content,
CSS provides the visual representation, and
JavaScript can change it after the fact.

HTML basics
Simple text files can be created in text editor
HTML is quite simple
The HTML tag can be described as the largest Russian doll, which contains all the other tags inside
itself.
The HTML tag is always the main ancestor, and the head and body tags are child
elements of the HTML tag
p stands for paragraph, ul for unordered list, h1 for level 1 header

CSS basics
HTML deals with the content and structure of web content, and the job ofCSS is
to make that content look good
CSS is in charge of the presentation, the visual presentation of content
CSS answers the question: "What will be styled", and the second part in curly bracketsanswers
the question: "What will it actually look like".
CSS properties color border-radius
Typography box-shadow
font-family
font-size
font-style BOX Layout
line-height margin flout
text-deco padding display
text-transform border position
text-shadow background
Web inspector=the most useful tool for a web developer

 This is an amazing way to look behind the scenes of each site.

 You can basically investigate how something was created.
 more importantly, you can debug your own work, figure out why something might not
work, or you can use it to experiment a bit by changing your design right in your
browser
 The inspector displays HTML code on the left and CSS information on the right.
 you can even make adjustments
 you can do quick manipulations right here in the browser to check out our design ideas
or perhaps understand why something doesn't quite work the wayyou want it to work.
 What if I wanted to adjust the design of this border a little? i can do it right in the
inspector.

4 курс - Неделя 1 Web Design: Wireframes to Prototypes

Responsive Design: What size should your website be?

For the desktop version, use the width of of around 1000 pixels.
You might ask what about the height? How tall should I make my wireframes? The answer
is simple, make them as tall as necessary to fit all the content of the page you are
designing.

Introduction and Primary navigation

In this video, we will talk about primary navigation, secondary navigation, utility
navigation, and navigation to related contents.

Primary navigation. You're probably already familiar with that term, it's the main
navigation of
the sites showcasing all top-level sections of the website.
At the bottom of each secondary page is a list of other secondary pages that are part of this
section. Besides the primary and secondary navigation, we also have something called utility
navigation. There's no strict rule of what to place inside a utility menu or whether you even
need one, but often important parts of the site that are not directly part of the site's main
content will be grouped here.

Related content, inline links, indexes, and search

Design pattern is basically an agreed upon structure for certain design tasks. Header-
that's usually includes a logo and navigation
Footer- It's the area on the bottom of all pages and it's a great place to include a copyright
statement, repeat some navigation links, sometimes an entire sitemap isincluded here, you
can repeat the logo and also display the social media links.
Sidebar- It's the area on the bottom of all pages and it's a great place to include a copyright
statement, repeat some navigation links, sometimes an entire sitemap isincluded here,
you can repeat the logo and also display the social media links.

Common form elements- forms are obviously a way to gather user input. Let's start with
checkboxes and radio buttons. Checkboxes enable the user to select multiple options from a
list. It's basically an "And" selection; select this, and this, and this. For radio buttons, you can
only select one option. So, it's an "Or" selection; select this, orthis, or this.

Introduction to Homepage Content Strategies

A homepage is often the very first page that your users will land on as they visit your
website.
Here are a few things that in my opinion a homepage needs to deliver on.
First, it should communicate the voice or the brand of your website. That is mostly
achieved with visual design, so with colors, and images, and textures, et cetera.
Second, the homepage should provide navigation options that take your users to the
content of your sites.

4 курс - Неделя 2 Web Design: Wireframes to Prototypes

Visual Mockups

In fact, the visual design is the very first thing users will experience. While the visual
mockup phase is the last phase of the UX process, users will form their first impression
from the decisions made in this phase. First impressions are obviously very important, and
the visual mockup phase is therefore really important.

Design Principles

I believe that the fundamental task of a designer is to create hierarchy, meaning to create order.
It's created via contrasts; our brains are wired to recognize differences.
Now, there are a few ways that visual contrasts can be created: By changing
scale, weight, direction, form, textures, space, value, or color.

Whitespace

Whitespace is another important tool for a designer, which might seem a little strange at first
since we are basically talking about space that is empty, space that is not filled with anything,
space one could naively argue that is wasted. It's space that lets your design breathe.

But there is another reason why designers that are new to the web often have whitespace
problems, even today. It's because they are still afraid of or unaccustomed to designing
layouts that scroll. But remember, space is cheap onwebsites it's not like print design
where you might not fit all of your content in the
allocated space if you use too much white space. So, you might run out of pages in the book
you are designing.

There will be too many characters per line. By the way, this rule is generally for bodytext so a
caption or a small pull-quote might be longer or might be shorter than 40-70characters.
A good starting point here is 1.5, so 150 percent of the typeface size to the leading size. So,
in traditional typography, you would say 20 pixels over 30 pixels, that spacing between the
line is 1.5 times.
UI vs UX

1. Primarily non-visual: UX
2. Creates tangible, material results: UI
3. Development is driven by user behavior and feedback: UX
4. Rooted primarily in graphic design: UI
5. Generating solutions to elevate user engagement on a given website: UX
6. Making decisions to define the form, aesthetics, and look and feel of a site: UI
7. Concerned with how a user chooses to navigate through a website: UX
8. Rooted in research, planning and testing: UX

Interface Conventions

1. An interface can be best described as a bridge between: a user and content

2. Why is it helpful to rely on real world models within interface design? Real worldmodels
are already familiar to a user, and therefore can help make the user’s experience
much more seamless.
3. What is the rule of thumb for organizing content within an interface?
Systematically
4. Which of the following examples are considered real world models? All of theabove.
5. True or false: An interface should be immediate and intuitive: true
6. Which physical relationship is NOT a factor for designing an interface? the
relative position of one user to another
7. Why is it important for the interface to react immediately when a user carries
out an action? The user needs confirmation from the interface that thesystem is
working
8. Context-specific design is best defined as: Shaping a design to reflectdifferences in
content, goals, and users.

Usability Heuristics

1. The dreaded spinning circle on YouTube: Visibility of system status 2.Automated chatbot
“therapy” app that sends you warm, positive text messagesthroughout the day: Match
between system and the real world
3. Gmail’s notification when you have forgotten to attach a document to an outgoingemail:
Error prevention
4. Google’s advanced image search: Flexibility and efficiency of use
5. The “Like” or “thumbs up” button across various platforms: Consistency and
standards
 1. It is more economical to develop: Website

2. It can be viewed across different devices and platforms: Website

3. It can be displayed on any device: Website

4. It is easy to share content with others: Website

5. Its content can be easily indexed by search engines: Website

6. It can be integrated into the operating system, allowing for access to advanceddevice
capabilities, such as fingerprint or iris scanners: App

7. It can be displayed only on the operating system it was designed for: App

8. It is easier to monetize: App

9. It requires that users download and install it onto their devices: App

10. It’s easier to control how users can interact with and view content: App

Navigation Systems

1. True or False? Primary navigation menus should always appear horizontally atthe top
of a page: False
2. Look at the image taken of the navigation elements that appear at the top ofthe
Coursera website.
The profile icon with the learner's name in the right hand corner of the image isan
example of: utility navigation

3. Look at the image taken of the navigation elements that appear at the top ofthe
Coursera website.
Why might have Coursera’s designers decided to permanently place a search field in
this area? Coursera’s outline of scope probably determined that search is an
important functionality requirement.
4. Look at the image taken from a science course's description page on theCoursera
platform.

This section, titled “You May Also Like," is an example of what kind ofnavigational
element? related content

5. Look at the image taken of the navigation elements that appear at the top of the Coursera
website.

What navigational system does the blue “Explore” button use? secondarynavigation

6. Looking at this page on the CalArts website, which of the following wayfinding
functions does the blue CalArts logo in the upper-left corner of the image accomplish?
 it lets learners know what page they're on.
 it lets learners see what site they're on.
 It lets learners navigate back to the CalArts homepage.
You have an important message that you want to share with the users of your website through a
site alert. In which of the following sections would it be the most appropriate for the site alert to
appear? Header

You want to deter visitors to your website from copying or re-using your content by posting a
copyright notice. In which of the following sections does a copyright notice usually appear?
Footer

Your website's business has multiple sponsors who are important contributors to the business
and need to be recognized as such, but you don't want the placement of their logos to supercede
your own. In which of the following sections would it be appropriate to ads or affiliate links for
thesesponsors? Sidebar

What is the advantage of an accordion on a website?

The user gets a scannable overview of the scope of information.

Complex, lengthy information can be presented in a morecompact way.

A client that runs a candy company has asked you to build a pop-up surveyon their website to
determine which of their top 8 chocolate bars have usersconsumed in the last year. Which of the
following would be the most appropriate form element to collect this information? checkbox

A beer company has asked you to design a landing page for their website to ensure access is
restricted to users aged 21 and up—the landing page will prompt users to enter their birthdate.
Which of the following would be anappropriate form element to use? Date picker

A software company would like to survey users about what mobile operatingsystem they use most
often—Android, iOS, Windows, or “Other”. Which of the following would be an appropriate
form element to use? Radio

An organic farmer has enlisted your services to help her augment her onlineordering system for
her restaurant clients. She would like her users to be able to choose a specific quantity of fresh
produce from a list of what will beharvested that week. Which of the folowing would be an
appropriate form element to use? Number steppe

Fill in the blank: Hierarchy is created through . (answer is one word)

CONTRAST

On the homepage for Wealthsimple.com, which of the following principles ofvisual contrast
is used? color, space, direction
On the homepage for Neamedia.fr, which of the following principles of visual contrast are used?
weight scale color

Why is it important to consider whitespace in web design? It creates drama ina composition
and leads the user’s eye around.

True or false: Hierarchy enables a designer to guide a viewer's attention equallyto all of the
elements on the screen? False

What is an important difference between print and web that designers shouldremember?
Space in print is limited, while space in the web is infinite.

Why isn’t it a good idea to justify body type on a web page? Web browsers arenot very good
at hyphenating text at this point in time.

According to the lecture, what is the suggested minimum body text size?16px

As a general rule of thumb, about how many characters should be on a line? 40 to 70

True or false: You should always stay away from free web fonts? False

How do you calculate the ratio of text height to line height? Divide the font sizeby the line
height.

What’s an argument against using true black text on a true white background throughout your
entire website? The high contrast can cause eye fatigue.

What is a reason mentioned in the video for making text larger on desktop screens? People tend
to view desktop screens from a greater distancecompared to mobile screens.

What should you always do when selecting a web font for your site? Make surethe web font is
freely available, and if not, obtain a web license for it.

When a user visits a website, what do they encounter first?

The form of the site
The content of the site
The URL of the site

When a designer begins working on a website, what do they encounter first?

the form of the site.
the content of the site
the URL of the site.
 What are some reasons why you might use a template for designing a website? You must
choose all correct answers—there are 3.
It can help you generate a website quickly.
The project doesn’t require complex user interaction.
It permits you to create multiple screens each with a distinct look and feel.
Users tend to prefer generic-looking websites.
It can help you organize repetitive kinds of content easily, such as images.

How exactly do shapes function as formal elements in a user interface?

They can be the functional parts of an interface, such as a form field or a button.
They can be illustrative design elements to help augment the look and feel ofthe
interface.
All of the above.

What are the ideal qualities for shapes when they are used for the functionalparts of an
interface?
round, with gradients on the edges.
geometric, simple, and systematic.
rounded corners, as they are easier on the user’s eyes.
it doesn’t matter as long as you have a drop shadow on it.

The experience a product or service creates for people in the real world-Satisfaction

What are some synonyms for “user”? Click all that apply.
visitor
designer
you
customer
target audience
them

In the context of this course, what are some synonyms for “client”? Click allthat apply.
you
customer
business owner
the person who hired you to create the website.
all departments within the organization or company you are creating the website for.

How exactly does color function as a formal element in a user interface?

It can help define the mood or attitude of the product articulated through the
interface.
It can help define how a user would navigate or interact with an interface.
 All of the above.

Julie is a 33-year-old woman living in Chicago. She is a mother of two children, is

working towards a master’s degree in psychology, and plays the flute in a punk band.
She receives a weekly farmbox with organic produce, which she loves to make into
delicious homecooked meals.
Which of the following details about Julie is NOT considered demographic information?
33 years old
plays the flute
Lives in Chicago
mother of two children
Based on what we know about Julie, which of the following statements would likely
NOT be a role ascribed to her?
Master’s student
Parent
Female
Musician

Based on what we know about Julie, which of the following statements would likely
NOT be a detail on her psychographic profile? Choose the best answer.
Enjoys going to music festivals
Reads Psychology Today
She has a curious, adventurous spirit
She eats at McDonald's almost daily

Why is it helpful to invent user profiles (or personas) in the UX research

process?
a) These profiles might actually describe its future users
b) They can be useful when describing your app idea to other people
c) They can be helpful for role playing when testing your app with users
d) These stand-ins can help make your app idea feel more real
e) All of the above
Choose the heuristic that best applies to the following example: the dreaded spinning
circle on YouTube- Visibility of system status

Choose the heuristic that best applies to the following example: an automatedchatbot
“therapy” app that sends you warm, positive text messages throughout the day- Match
between system and the real world

Choose the heuristic that best applies to the following example: Gmail’s notification when you
have forgotten to attach a document to an outgoing- Error prevention
Choose the heuristic that best applies to the following example: Google’sadvanced
image search- Flexibility and efficiency of use

Choose the heuristic that best applies to the following example: The “Like” or“thumbs
up” button across various platforms- Consistency and standards

From the website developer’s perspective, which should be given greater

consideration in an outline of scope? functionality requirements

Why is it suggested that menu items should contain no more than 5-9 items? Because
a human’s average short term memory can only hold 7 (plus/minus 2) items at a time.

How would you visually indicate that elements of a sitemap are part of a
process? Arrows

How would you indicate in a sitemap a place where a user needs to make a
choice? Add a decision point

What does the shape in the image below this represent in a website? Contentnode,
page, view

Take a moment to decide which of the following elements you will definitely include onthe
homepage for your course project. Select all that apply.

Logo/title/n
ame
Navigation
Take a moment to contemplate which of the following distinct approaches could work foryour
homepage. Select all that apply.

table of
contents
featured
contentpalate
cleanser call
to action
narrative

fork in the road

fusion

1. Choose the best answer. The space in between the columns is let blank and that’s called a
gutter
2. Choose the best term that applies to this statement. Back and design could be looked at as
coding, programming
3. True or False? An icon does that by showing us a picture of the thing. It shows us a visual
representation of it that is relatively realistic compared to what the object is- True
4. Why is it helpful to rely on real world models within interface design? Real world models
are already familiar to a user, and therefore can help make the user’s experience much
more seamless.
5. What stage is it? In this visual stage, we’ll be developing the user interface and using it to
create final designs to put into a working digital prototype- a visual stage
6. The space on the outside edge, that's called the margins
7. Experience, function, design, and form have a rectangular relationship where they’re all
connected to each other- False
8. Strategy becomes scope when user needs and client needs are translated into specific
requirements for content and functionality.
9. A beer company has asked you to design a landing page for their website to ensure access is
restricted to users aged 21 and up—the landing page will prompt users to enter their
birthdate. Which of the following would be an appropriate form element to use? Date
picker
10. Generating solutions to elevate user engagement on a given website: UX
11. What’s an argument against using true black text on a true white background throughout
your entire website? The high contrast can cause eye fatigue.
12. Choose the heuristic that best applies to the following example: the dreaded spinning circle
on YouTube- Visibility of system status
13. Choose the heuristic that best applies to the following example: an automated chatbot
“therapy” app that sends you warm, positive text messages throughout the day- Match
between system and the real world
14. Choose the heuristic that best applies to the following example: Gmail’s notification when
you have forgotten to attach a document to an outgoing email- Error prevention
15. Choose the heuristic that best applies to the following example: Google’s advanced image
search- Flexibility and efficiency of use
16. Choose the heuristic that best applies to the following example: The “Like” or “thumbs up”
button across various platforms- Consistency and standards
17. Body is the place where the content lives and the place where the user sees the result of any
changes that they've investigated in the navigation area
18. What stage is it? In this stage will still use words, but it’ll use also devices like maps,
sketches, and diagrams- middle stage
19. Choose the heuristic that best applies to the following example: What this really means is
that if there's a problem, provide the best solution for the user quickly and easily. If you
solve the problem quickly, it’s like it never happened – Help users recognize, diagnose,
and recover from errors
20. Choose the common design pattern that best applies to the following description: That`s
usually an area on the left or the right side of the screen that has some secondary content
like the navigation it ads will be displayed there- Sidebar
21. Choose the best answer. This might be the first time you share your idea with somebody
else. It’s certainly the first time you will be getting feedback from external source. For this
simple test your external source could be- Family or friends
22. Choose the navigation that best applies to the following description: It’s the main navigation
of the sites showcasing all top-level sections of the website- Primary navigation
23. True or false? The waterfall process is circular and interative- False
24. Choose the heuristic that best applies to the following example: Automated chatbot
“therapy” app that sends you warm, positive text messages throughout the day: Match
between system and the real word
25. The best interface is the one that has the best relationship to its content, the one that's the
most sympathetic. True
26. Choose the best answer. It is easier to monetize. App
27. The primary reason for creating a pattern library would be to ensure the Ul stays consistent.
False
28. Simplicity and homogeneity can create a familiar and predictable interface across a number
of different bodies of content or different kinds of experiences. False
29. The mission statement is longer still, a few lines or a paragraph. It gives you a chance to get
much more descriptive about what your App does; you could talk about the ambitions, or
the achievements of your App;
30. The user is doing this in an active way by making decisions and telling it to the tester. And
the tester is doing it in a passive way by observing what the user does. Ideally, the user
won't run into any problems and the tester will really be observing just what works. But it's
also really useful when the user finds something that doesn't work. True
31. What is the example of Consistency? on a telephone keypad, where all of the numbered
buttons look the same, you can anticipate that pressing the number "8" will have more
or less the same function as pressing the number "1".
32. The agile process is circular and iterative. Instead of planning for one big launch at the very
end of a long process, there will be many launches along the way. True
33. Working with a waterfall process can mean years of development before your project sees
the light of day and since nothing is tested until late in the process, chances are pretty high
that the project went down the wrong path and the final product has serious flaws that
cannot be easily corrected. True
34. Checkboxes are round and radio buttons are rectangular. False
35. Interaction map should have: clarity, hierarchy, modularity, growth potential.
36. What is the example of real world knowledge? we understand the functionality of digital
buttons on a screen because we’ve experienced analog buttons in the real world—on
calculators, remote controls, elevators, and so on.
37. Target audience seasoned stock market pros or people that are just starting out to invest. In
other words, is your site for experts or newbies, or do you intend to target both groups, or
you might design a site that advocates for a political cause. False
38. it can be displayed on any device. Website.
39. The interface is the way that the user gets to that content.
 40. A software company would like to survey users about what mobile operating system they
use most often—Android, iOS, Windows, or “Other”. Which of the following would be an
Appropriate form element to use? Radio
41. This is for users that want to circumvent the navigation altogether because they are looking
for very specific content via a keyword. Search

1. the dreaded spinning circle on YouTube

~ Visibility of System status

2. an automated chatbot “therapy” app that sends you warm, positive text messages
throughout the day.

~ Match between system and the real world.

3. Gmail’s notification when you have forgotten to attach a document to an outgoing email.

~Error Prevention
4. Google’s advanced image search.

~Flexibility and efficiency of use.

5. The “Like” or “thumbs up” button across various platforms.

~Consistency and standards.

UI/UX
1. Primarily non-visual.

UX
2. Creates tangible, material results.

UI
3.Development is driven by user behavior and feedback.

UX
4. Rooted primarily in graphic design.

UI
5. Generating Solutions to elevate user engagement on a given website.

UX
6. Making decisions to define the form, aesthetics and look and feel of a site.

UI
7. Concerned with how a user chooses to navigate through a website.

UX
 8. Rooter in research,planning and testing.

UX

1. An interface can be best described as a bridge between :

a user and content.

2. Why is it helpful to rely on real world models within interface design? Choose the best answer.
Real world models are already familiar to a user, and therefore can help make the user's
experience much more seamless.
3. Which of the following examples are considered real world models?

All of the above

4. What is the rule of thumb for organizing content within an interface?

Systematically.
5. An interface should be immediate and intuitive.

True

5. While user interactions should occur in as few steps as possible, in what situation might an
extra step be appropiate?

withdrawing a large sum of money from an ATM.

6. Which relationship is NOT a factor for designing an interface?

the relative position of one user to another.

7. Why is it important for the interface to react immediately when a user carries out an action?
Choose the best answer.

The user needs confirmation from the interface that the system is working.
8. Context-specific design is best defined as :

Shaping a design to reflect differences in content, goals and users.

1. It is more economical to develop.

~Websi
te

2. It can be viewed across different devices and platforms.

~Websi
te

3. It can be displayed on any device.

~Websi
te

4. It is easy to share content with others.

~Websi
te
5. Its content can be easily indexed by search engines.

~Websi
te

6. It can be integrated into the operating system, allowing for access to advanced device
capabilities, such as fingerprint or iris scanners.

~App
 7. It can be displayed only on the operating system it was designed for.

~App
8. It is easier to monetize.

~App
9. It requires that users download and install it onto their devices

~App
10. It’s easier to control how users can interact with and view content.

~App

1. Fill in the blank: Hierarchy is created through . (answer is one word)

~contrast
2. On the homepage for Wealthsimple.com, which of the following principles of visual contrast
is used? Click all that apply.

~color,space,direction
3. On the homepage for Neamedia.fr, which of the following principles of visual contrast are
used? Click all that apply.

~scale,color,weight
4. Why is it important to consider whitespace in web design?

~It creates drama in a composition and lead the user's eye around.
5. True or false: Hierarchy enables a designer to guide a viewer's attention equally to all of the
elements on the screen.

~False
6. True or False: Whitespace must always be white.

~False
7. What is an important difference between print and web that designers should remember?

~Space in print is limited, while space in the web is infinite.

1.Why isn’t it a good idea to justify body type on a web page?

~Web browsers are not very good at hyphenating text at this point in time
2.According to the lecture, what is the suggested minimum body text size?
~16 px
3. As a general rule of thumb, about how many characters should be on a line?
~40-70
4. True or false: You should always stay away from free web fonts.

~False
5. How do you calculate the ratio of text height to line height?

~Divide the font size by the line height

6. What’s an argument against using true black text on a true white background throughout your
entire website?

~The high contrast can cause eye fatigue

7. What is a reason mentioned in the video for making text larger on desktop screens?

~People tend to view desktop screens from a greater distance compared to mobile screens.
8.What should you always do when selecting a web font for your site?
~Make sure the web font is freely available and if not obtain a web license for it.

1. You have an important message that you want to share with the users of your website
through a site alert. In which of the following sections would it be the most appropriate for the
site alert to appear?

~header
2. You want to deter visitors to your website from copying or re-using your content by posting a
copyright notice. In which of the following sections does a copyright notice usually appear?

~footer
3. Your website's business has multiple sponsors who are important contributors to the business
and need to be recognized as such, but you don't want the placement of their logos to supercede
your own. In which of the following sections would it be appropriate to ads or affiliate links for
these sponsors?

~sidebar
4. What is the advantage of an accordion on a website? Check all that apply.

~The user gets a scannable overview of the scope of information, Complex, lengthy information
can be presented in a more compact way., It lets the user open and close content buckets.
5.A client that runs a candy company has asked you to build a pop-up survey on their website to
determine which of their top 8 chocolate bars have users consumed in the last year. Which of the
following would be the most appropriate form element to collect this information?

~checkbox
6.A beer company has asked you to design a landing page for their website to ensure access is
restricted to users aged 21 and up—the landing page will prompt users to enter their birthdate.
Which of the following would be an appropriate form element to use?
~date picker
7.A software company would like to survey users about what mobile operating system they use
most often—Android, iOS, Windows, or “Other”. Which of the following would be an
appropriate form element to use?

~radio
8.An organic farmer has enlisted your services to help her augment her online ordering system for
her restaurant clients. She would like her users to be able to choose a specific quantity of fresh
produce froma list of what will be harvested that week. Which of the following would be an
appropriate form element to use?

~number stepper

1. True or False? Primary navigation menus should always appear horizontally at the top of a page.

~False
2. Look at the image taken of the navigation elements that appear at the top of the Coursera

website. The profile icon with the learner's name in the right hand corner of the image is an
example of
~ utlity navigation
3. Look at the image taken of the navigation elements that appear at the top of the Coursera

website. Why might have Coursera’s designers decided to permanently place a search field in
this area?
~Coursera's outline of scope probably determined that search is an important functionality
requirement. 4.Look at the image taken from a science course's description page on the Coursera
platform.
This section, titled “You May Also Like," is an example of what kind of navigational element?

~ related content.
5. Look at the image taken of the navigation elements that appear at the top of the Coursera

website. What navigational system does the blue “Explore” button use?
~secondary navigation
6. Looking at this page on the CalArts website, which of the following wayfinding functions does
the blue CalArts logo in the upper-left corner of the image accomplish?
Select all that apply.

~it lets learners navigate back to the calarts homepage, it lets learners see what they're on.

Try to find here:

https://quizlet.com/vn/555247729/uxui-flash-
cards/

1. Choose the best term that applies to this

statement. Creates tangible, material results
 a. U
X b.
UI
2. Choose the best answer. It’s content can be easily indexed by search engines.
a. App
b. Website
3. Why is it important for the interface to react immediately when a user carries out on action?
Choose the best answer

a. The user needs confirmation from the interface that the system is working
b. The system behind the interface needs to process tasks very quickly in order to
keep pace with pace competing system
c. Users are inherently impatient
4. Why isn’t it a good idea to justify body type on web page?
a. Web browsers are not very good at hyphenating text at the point in time.
b. It makes the text look weird at different screen sizes.
c. You risk making columns that are too wide to read easily
d. They are not compatible with screen readers for users with vision-related impairment
5. How many rules for user interface design does Nielson have?
a. 11
b. 9
c. 10
d. 7
6. … print and web that designers should remember?
a. Space in print is limited, while space in the web is infinite
b. Print design should incorporate more whitespace
c. Nothing. Modern technology has made the differences between print and web design
minute
d. Web browser controls limit the amount of whitespace that can be seen in between
elements, which is not a problem in print
7. Choose the best answer.
What stage is it? We’re really just using words to describe everything that we were thinking about
a. last stage
b. middle-
stage c. ideas phase
d. visual stage
8. In Coursera the section, titled “You May Also Like” is an example of what kind of navigational
element?
a. inline links to other pages
b. index of pages
c. search results for other
pages d. related content
9. Choose the best answer.
is an information delivery platform that lets you access written text, images,
recordings, movies and files
a. Functionalit
b. Website
c. Strategy
d. Content
10. True or False
First impression are very important, and the visual mockup phase is therefore really
important a. True
 b. False
11. Choose the heuristic that best applies to the following description:
So, don’t make the interface hard work for the user. The user should be able to see the part of
the interface that they’re going so content …… the point, or site of interaction. So, the user is
reacting immediately rather than going through a series of remembered action
a. Match between the system and the real world
b. User control and freedom
c. Visibility of system
status d. Recognition rather than
recall
12. are normally functional, minima, consistent and user-centric will point more
directly…… caught up in details in , don’t be too fussy or obsess about small elements
a. Usability guidelines
b. User
testing c.
Wireframes
d. Site maps
13. Choose the best answer.
links, something called an index, and search
a. Outlin
e b. Inline
c. Utility
d. Secondary
14.True or False
The best interface is the one that has the best relationship to its content, the one that’s the most
sympathetic
a. True
b. False
15. Choose the best term that applies to this statement.
will allow a user to change their mind after they have made an action, or at least …..
a. U
X b.
UI

16. Find the elements and instances of interactivity or feedback:

1) a call to action
2) icons as labels for different kinds of
content 3) icons or report a problem
4) state changes to show whether an items has been completed or
not a. 2, 3
b. 2, 3, 4
c. 1, 2, 3, 4
d. 1, 4
17. Choose the best answer. It requires that users download and install it onto their
devices a. App
b. Website
18. Choose the best term that applies to this statement.
dealing with graphic elements, and looking at the interface itself, building design assets

a. Front end design

b. Back end design
 c. Testing
d. ….
19. Choose the best term that applies to this statement.
is a place where the content lives and the place where the user sees the result of any
changes that they … navigation area
a. Foote
r b.
Body
c. Header
d. Navigation
20. Choose the best answer.
This is for users that want to circumvent the navigation altogetherbecause they are looking for
very specific content via a keyword
a. Inde
x b. Search
c. Inline
d. Scope
21. Choose the best answer.
What stage is it? In this stage will still use words, but It’ll also use other devices like maps,
sketches, and diagrams.
a. a visual
stage b. middle stage
c. last stage
d. ideas phase
22. Which of the following examples are consider real world models?
a. Camera shutter sound when using a smartphone’s built-in camera
b. The “trash bin” on your
computer c. All of the above
d. A screen-based button
23. Choose the best answer.
A beer company asked you to design a landing page for their website to ensure access is restricted
to users aged 21 and up the landingpage will prompt users to enter their birthdate. Which of the
following would be an appropriate form element to use?
a. dropdown menu
b. number stepper
c. checkbo
x d. date picker
24. Choose the best answer.
Context-specific design is best defined as
a. Shaping a design to reflect differences in content, goals, and users
b. A method of design that reflects the physical, geographical location where the
design wasmade
c. What happens when emerging designers make websites
d. When the designer uses different software programs to make an interface.
25. Choose the best answer.
You have an important message that you want to share with the users of your website through site
alert. In which of the following sectionwould it be the most appropriate for the site alert to appear?
 a. content
b. sidebar
c. foote
r d. header
26. Choose the best term that applies to this
statement. sitemap is showing us the main
activities of our app.
27. Choose the best answer
Two stages of non-visual user testing
a. develop content map, organize the non-visual
testing, b. develop paper prototype, test it on a user;
c. find out the idea, develop paper prototype;
d. find out content map, test it on a user
28. Choose the heuristic that best applies to the following example: The "Like" or "thumbs up"
button across various platform
a. Consistency and standards
b. Visibility of system status
c. Error prevention
d. User control and freedom
29. What is an important difference between print and web that designers should remember?
a. Space in print is limited, white space in the web is infinite– maybe right answer
b. Print design should incorporate more whitespace
c. Nothing. Modern technology has made the differences between print and web design
minut
d. Web browser controls limit the amount of whitespace that can be seen in between
elements, which is not a problem in print
30. True or False
The button shaped might have a relationship to the text that has to sit in it or the icon or image
thathas to sit in it
a. True
b. False
31. True or False
A shape is just a self-contained object that is interactive, that you can click on or interact with
a. True
b. False
32. Choose the best answer. It’s easier to
monetize. a. App
b. Website
33. What should you always do when selecting a web font for your site?
a. Avoid Arial, Courier, Georgia, Verdana or Times New Roman
typeface b. Make sure the web font is freely available, and if not, obtain a
web license for it
c. Look for the typeface first on your computer
d. Export the typeface to an image file
34. True or False
You should stay away from free web fonts
a. True
b. False
 35. Choose the best term that applies to this
statement. Development is driven by user behavior
and feedback

a. UX
b. UI
36. Choose the best term that applies to this statement.
are a simple sketched of the structural makeup of the website
a. Outline of scopes
b. Sitemap
c. Visual
mockups d. Wireframe
37. True or False
Hierarchy enables a designer to guide a viewer’s attention equally to all of the elements on the
screen a. False
b. True
38. True or False
The idea that website have to work in so many different size contexts is today fully at the heart of
what it means to design website
a. True
b. False

1. the dreaded spinning circle on YouTube

~ Visibility of System status

2. an automated chatbot “therapy” app that sends you warm, positive text messages
throughout the day.

~ Match between system and the real world.

3. Gmail’s notification when you have forgotten to attach a document to an outgoing email.
~Error Prevention
 4. Google’s advanced image search.

~Flexibility and efficiency of use.

5. The “Like” or “thumbs up” button across various platforms.

~Consistency and standards.

UI/UX
1. Primarily non-visual.

UX
2. Creates tangible, material results.

UI
3.Development is driven by user behavior and feedback.

UX
4. Rooted primarily in graphic design.

UI
5. Generating Solutions to elevate user engagement on a given website.

UX
6. Making decisions to define the form, aesthetics and look and feel of a site.

UI
7. Concerned with how a user chooses to navigate through a website.

UX
8. Rooter in research,planning and testing.

UX

1. An interface can be best described as a bridge between :

a user and content.

2. Why is it helpful to rely on real world models within interface design? Choose the best answer.

Real world models are already familiar to a user, and therefore can help make the user's
experience much more seamless.
3. Which of the following examples are considered real world models?

All of the above

 4. What is the rule of thumb for organizing content within an interface?

Systematically.
5. An interface should be immediate and intuitive.
True

5. While user interactions should occur in as few steps as possible, in what situation might an
extra step be appropiate?

withdrawing a large sum of money from an ATM.

6. Which relationship is NOT a factor for designing an interface?

the relative position of one user to another.

7. Why is it important for the interface to react immediately when a user carries out an action?
Choose the best answer.

The user needs confirmation from the interface that the system is working.
8. Context-specific design is best defined as :

Shaping a design to reflect differences in content, goals and users.

1. It is more economical to develop.

~Websi
te

2. It can be viewed across different devices and platforms.

~Websi
te

3. It can be displayed on any device.

~Websi
te

4. It is easy to share content with others.

~Websi
te

5. Its content can be easily indexed by search engines.

~Websi
te

6. It can be integrated into the operating system, allowing for access to advanced device
capabilities, such as fingerprint or iris scanners.

~App
7. It can be displayed only on the operating system it was designed for.
~App
8. It is easier to monetize.

~App
9. It requires that users download and install it onto their devices

~App
 10. It’s easier to control how users can interact with and view content.

~App

1. Fill in the blank: Hierarchy is created through . (answer is one word)

~contrast
2. On the homepage for Wealthsimple.com, which of the following principles of visual contrast
is used? Click all that apply.

~color,space,direction
3. On the homepage for Neamedia.fr, which of the following principles of visual contrast are
used? Click all that apply.

~scale,color,weight
4. Why is it important to consider whitespace in web design?

~It creates drama in a composition and lead the user's eye around.
5. True or false: Hierarchy enables a designer to guide a viewer's attention equally to all of the
elements on the screen.

~False
6. True or False: Whitespace must always be white.

~False
7. What is an important difference between print and web that designers should remember?

~Space in print is limited, while space in the web is infinite.

1.Why isn’t it a good idea to justify body type on a web page?

~Web browsers are not very good at hyphenating text at this point in time
2.According to the lecture, what is the suggested minimum body text size?
~16 px
3. As a general rule of thumb, about how many characters should be on a line?

~40-70
4. True or false: You should always stay away from free web fonts.

~False
5. How do you calculate the ratio of text height to line height?
~Divide the font size by the line height
6. What’s an argument against using true black text on a true white background throughout your
entire website?
~The high contrast can cause eye fatigue
7. What is a reason mentioned in the video for making text larger on desktop screens?

~People tend to view desktop screens from a greater distance compared to mobile screens.
8.What should you always do when selecting a web font for your site?
~Make sure the web font is freely available and if not obtain a web license for it.

1. You have an important message that you want to share with the users of your website
through a site alert. In which of the following sections would it be the most appropriate for the
site alert to appear?

~header
2. You want to deter visitors to your website from copying or re-using your content by posting a
copyright notice. In which of the following sections does a copyright notice usually appear?

~footer
3. Your website's business has multiple sponsors who are important contributors to the business
and need to be recognized as such, but you don't want the placement of their logos to supercede
your own. In which of the following sections would it be appropriate to ads or affiliate links for
these sponsors?

~sidebar
4. What is the advantage of an accordion on a website? Check all that apply.

~The user gets a scannable overview of the scope of information, Complex, lengthy information
can be presented in a more compact way., It lets the user open and close content buckets.
5.A client that runs a candy company has asked you to build a pop-up survey on their website to
determine which of their top 8 chocolate bars have users consumed in the last year. Which of the
following would be the most appropriate form element to collect this information?

~checkbox
6.A beer company has asked you to design a landing page for their website to ensure access is
restricted to users aged 21 and up—the landing page will prompt users to enter their birthdate.
Which of the following would be an appropriate form element to use?

~date picker

7.A software company would like to survey users about what mobile operating system they use
most often—Android, iOS, Windows, or “Other”. Which of the following would be an
appropriate form element to use?

~radio
8.An organic farmer has enlisted your services to help her augment her online ordering system for
her restaurant clients. She would like her users to be able to choose a specific quantity of fresh
produce froma list of what will be harvested that week. Which of the following would be an
appropriate form element to use?

~number stepper
 1. True or False? Primary navigation menus should always appear horizontally at the top of a page.

~False
2. Look at the image taken of the navigation elements that appear at the top of the Coursera

website. The profile icon with the learner's name in the right hand corner of the image is an
example of
~ utlity navigation
3. Look at the image taken of the navigation elements that appear at the top of the Coursera

website. Why might have Coursera’s designers decided to permanently place a search field in
this area?
~Coursera's outline of scope probably determined that search is an important functionality
requirement. 4.Look at the image taken from a science course's description page on the Coursera
platform.
This section, titled “You May Also Like," is an example of what kind of navigational element?

~ related content.
5. Look at the image taken of the navigation elements that appear at the top of the Coursera

website. What navigational system does the blue “Explore” button use?
~secondary navigation
6. Looking at this page on the CalArts website, which of the following wayfinding functions does
the blue CalArts logo in the upper-left corner of the image accomplish?
Select all that apply.

~it lets learners navigate back to the calarts homepage, it lets learners see what they're on.