Laura's UX notes

1. MANGO

I like its vertical scrolling.

At first, users can scroll vertically to select an item, then keep it vertical to view the item details. Finally, clicking on the black tip bar can jump to the shopping cart.

2. Google Map

Check routes and plans with just a few simple steps. Live review is very helpful but the notifications are annoying.

3. Grubhub

Grubhub offers many types of food. Each step is very clear and works very smoothly.

4. AMC Theatre

1. Information Architecture

The answers to these questions lie in the use of interaction design values, principles, and patterns. Design values are guidelines for the successful and appropriate practice of design. Design principles are guidelines for the design of useful and desirable products, systems, and services. Design patterns are exemplary, generalizable solutions to specific classes of design problems.

Designers should create design solutions that are:   Ethical (considerate, helpful )/  Do no harm /Improve human situations / Purposeful (useful, usable) / Help users achieve their goals and aspirations / Accommodate user contexts and capacities / Pragmatic (viable, feasible) / Help commissioning organizations achieve their goals / Accommodate business and technical requirements / Elegant (efficient, artful, affective) / Represent the simplest complete solution / Possess internal (self-revealing, understandable) coherence / Appropriately accommodate and stimulate cognition and emotion

Environmental impacts(sustainability):Manufacturing-use of materials/ Transportation/Usage and energy consumption/Recyclability/Facilities/

Improve human situations: Increasing understanding (individual, social, cultural)/ Increasing the efficiency and effectiveness of individuals and groups/ Improving communication between individuals and groups/ Reducing sociocultural tensions between individuals and groups/ Improving equity (financial, social, legal)/ Balancing cultural diversity with social cohesion

Purposeful interaction design

Pragmatic interaction design: A design must get built to be of value.-“gracefulness and restrained beauty of style” and “scientific precision, neatness, and simplicity.”

Possess internal coherence: Good design has the feeling of a unified whole, in which all parts are in balance and har-mony.

Interaction Design Principles: technology should serve human intelligence and imagination

optimize the experience of the user

interaction design patterns: structure and organization of elements/  dynamic behaviors and changes in elements in response to user activity.

A product’s platform： enables the product to function—in terms of both user interactions and the product's internal operations. (physical form, display size and resolution, input methods, )

Posture： users’ attention/ the products’ behaviors respond/ based on the environment

A product’s look and behavior should also reflect how it is used, rather than the personal taste of designers, developers, or stakeholders

target intermediate users

Be generous with screen real estate, toolbars

single-function applications-the transient posture-瞬时应用程序-big/simple/direct

Remember user choices-a transient application remembers where it was the last time

Daemonic posture- do not interact with the user

standalone posture

Zara shows products with a combination of video and pictures. The feeling of sliding down is very silky. One page shows a picture, which leaves a lot of space for users to breathe.

2. Macy's

Macy's is more commercial, with pages dominated by product images and sales promotions.

3. Dunkin Donuts

Dunkin Donuts is more about showing the real appearance of the food, so the page is very clean. In addition, it shows more information about delivery, offers and downloadable app.

4. IKEA

With cozy pictures, IKEA's slogans are like neighbors greeting you and giving you a warm feeling. Next is some service information. IKEA puts the promotions at the end.

5. Starbucks

Starbucks has a bright and strong color palette with an artistic touch. The whole visual is mainly to highlight the appearance of the drinks to display their deliciousness. After the display of drinks is the delivery information and discount card coupons.

1. Apple weather is a visual pleasure. The color scheme, texts and information tips are comfortable to the user.

2. When making visual data about emotions, facial expressions are more helpful. It is also interesting to express emotions with colors.

3. I am interested in some data visualization that requires user interaction. Blanks and fills make the users' choices clearer.

4. The bar chart is a classic that never goes out of style.

5. After looking at many bar charts or pie charts, the data visualization in text gives a refreshing effect.

1. Apple

Using simple icons instead of text makes the page very clean and playful. Specific icons also help users to identify products.

2. Puma

I really like the way puma separates subcategories from products with a bold black line. When I click on the menu icon, it smoothly transitions into a half-page mega menu.

https://us.puma.com/us/en/home

3. Midtown comic

https://www.midtowncomics.com/

The dates of release are very important to people who want to buy comics, so I'm glad the calendar is on the mega menu.

4. Strand Book Store

https://www.strandbooks.com/

Even though Strand Book Store has a lot of books, it is interesting to see how few sub-categories are displayed on the online website.

5. Best Buy

https://www.bestbuy.com/

Best Buy shows the vertical dropdown mega menu. You need to click a menu icon before the mage menu pops up, which frees up a lot of space for the main page. Also, there is interaction on the page. You can click back to return to the main page of the mega page.

Satisfy a diverse audience of users-flawed/The best way to successfully accommodate a variety of users is to design for specific types of individuals with specific needs. /  you can’t increase the cognitive load and navigational overhead for all users/ interfere with the satisfaction of others

Users whose needs best represent the needs of a larger set of key constituents/ prioritize these individuals

Personas help designers do the following: a.provide the foundation for the design effort. b. Communicate with stakeholders, developers, and other designers. c. Measure the design’s effectiveness. Design choices can be tested on a persona. d. Contribute to other product-related efforts such as marketing and sales plans: clients’ organizations, informing marketing campaigns, organizational structure, customer support centers, and other strategic planning activities.

The elastic user/ Self-referential design/ Edge cases

When it’s time to make product decisions, this “user” becomes elastic, conveniently bending and stretching to fit the opinions and presuppositions of whoever is talking.

Why Personas Are Effective: user models is that they are personifications- engage the empathy of the design

Personas are based on research: Interviews with users outside of their use contexts / Information about users supplied by stakeholders and subject matter experts (SMEs) / Market research data such as focus groups and surveys / Market-segmentation models / Data gathered from literature reviews and previous studies

It is possible to create a persona that represents the needs of several user roles.

Persona design: usage behavior and goals. Market segment helps to determine the demographic range

Understanding Goals

Goals motivate usage patterns

Goals should be inferred from qualitative data

User goals and cognitive processing

Product design should address three different levels of cognitive and emotional processing: visceral, behavioral, and reflective. Visceral is the most immediate level of processing. we react to a product’s visual and other sensory aspects that we can perceive before significant interaction occurs. / Behavioral is the middle level of processing. It lets us manage simple, everyday behaviors /Reflective is the least immediate level of processing. It involves conscious consideration and reflection on past experiences.

Designing for visceral response: Designing for the visceral level means designing what the senses initially perceive, before any deeper involvement with a product or artifact occurs-designing beautiful things/Visceral design is actually about designing for affect—that is, eliciting the appropriate psychological or emotional response for a particular context—rather than for aesthetics alone.

Getting behavior design right—assuming that we also pay adequate attention to the other levels—provides our greatest opportunity to positively influence how users construct their experience with products.

Designing for reflection designing to build long-term product relationships./  connected to it via personal or cultural associations—the opportunity to create reflective meaning is greatly enhanced.

The three types of user goals: Experience goals-Feel smart and in control/Have fun/ Feel reassured about security and sensitivity/ Feel cool or hip or relaxed/ Remain focused and alert.  End goals-represent the user’s motivation for performing the tasks associated with using a specific product./Interaction designers must use end goals as the foundation for a product’s behaviors, tasks, look, and feel. Life goals-represent the user’s personal aspirations that typically go beyond the context of the product being designed/long-term desires, motivations, and self-image attributes, which cause the persona to connect with a product.

User goals are user motivations

Don’t make the user feel stupid.

Experience goals, which are related to visceral processing: how the user wants to feel

End goals, which are related to behavior: what the user wants to do

Life goals, which are related to reflection: who the user wants to be

Nonuser goals-User goals are not the only type of goals that designers need to take into account. Cus-tomer goals, business goals, and technical goals are all nonuser goals.

Customer goals

Business goals include the following:

•     Increase profit.

•     Increase market share.

•     Retain customers.

•     Defeat the competition.

•     Use resources more efficiently.

•     Offer more products or services.

•     Keep its IP secure.

Educate the public.

•     Raise enough money to cover overhead.

Technical goals include the following:Run in a variety of browsers./ Safeguard data integrity/ Increase application execution efficiency/Use a particular development language or library./ Maintain consistency across platforms.

Successful products meet user goals first

Group interview subjects by role

Identify behavioral variables：

Activities—What the user does; frequency and volume

Attitudes—How the user thinks about the product domain and technology

Aptitudes—What education and training the user has; ability to learn

Motivations—Why the user is engaged in the product domain

Skills—User abilities related to the product domain and technology

40. Synthesize characteristics and define goals-We derive a persona’s goals and other attributes from their behaviors.-These behaviors are synthesized from what was observed/identified in the research process as represent-ing meaningful, typical use of the product over a period of time that adequately cap-tures the relevant set of user actions.

41. Only concrete data can support the design and business decisions your team will ultimately make.

42. Focus the design for each interface on a single primary persona.

43. an organization and to have interpersonal or social relationships with each other.

44. What we must do then is prioritize our personas to determine which should be the primary design target.

Primary

Secondary

Supplemental

Customer

Served

1. Compare all users' information together for a cleaner and more efficient look. Separate them with different colors, with pictures and charts, so that each user's characteristics are distinct.

2. The information in this version is more intuitive. Knowing what users hate is just as important as knowing their motivations.

3. Showing pictures looks more flexible. If the textual information is very detailed, it may limit the designer's creativity. Collecting and observing the user's belongings may create unexpected services for them.

11

Sincerity: that’s the hard part.

Things that diminish goodwill: Hiding information that I want/ Punishing me for not doing things your way/ Shucking and jiving me./ Putting sizzle in my way/ Your site looks amateurish.

convince me that you do have my interests at heart.

No pages bloated with feel-good marketing photos

Things that increase goodwill:  Know the main things that people want to do on your site and make them obvious and easy/ Tell me what I want to know/ Save me steps wherever you can/ Put effort into it/ Know what questions I’m likely to have, and answer them/ Provide me with creature comforts like printer-friendly pages /Make it easy to recover from errors/ When in doubt, apologize.

12

Accessibility:  increasing the size of the type.1

1. Fix the usability problems that confuse everyone

2. Read an article

Add appropriate alt text to every image.

Use headings correctly.

Make your forms work with screen readers

Put a “Skip to Main Content” link at the beginning of each page.

Use an accessible template.

Make all content accessible by keyboard.

Create significant contrast between your text and background

13

two “professions” that focused on making Web sites more usable: Usability (making sure things are designed in a way that enables people to use them successfully) and Information

One difference between User Centered Design and User Experience Design is their scope: UCD focused on designing the right product and making sure that it was usable.UX sees its role as taking the users’ needs into account at every stage of the product life cycle,

a result usability is an easier sell

1. Victoria's Secret

I especially like the information in the filter that tells you how many items are available for this option.

2. Midtown comic

This filter shows the calendar to find comics by a specific time. You can choose the year provided on the web page, or create your own dates.

3. eBay

If you have a lot of needs, eBay will create a separate filter window for you. You can select many options at the same time and search for them later.

4. Nature Made

On nature made you can select more than one and then search. The options and apply button are obvious when clicked.

5. Walmart

I think Walmart's horizontal filter is rare. Aligning with the orientation of pictures and users' browsing habits can keep people from getting distracted. It would be nice to float on the page all the time.

08

there’s a natural tendency to project these likes and dislikes onto users in general: to think that most users like the same things we like.

ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC

their intentions, motivations, and thought processes-- their individual reactions to Web pages are based on so many variables that attempts to describe users in terms of one-dimensional likes and dislikes are futile—and counter-productive.

good Web design is largely a matter of figuring out what people like.

09

the value proposition of your sites is important

If you want a great site, you’ve got to test.

Why a morning a month?It keeps it simple so you’ll keep doing it. A morning a month is about as much time as mostteams can afford to spend doing testing.

Keep quick and efficient

a large sample size, a clearly defined and rigorously followed test protocol, and lots of data gathering and analysis.

Welcome (4 minutes)./The Home page tour (3 minutes)-Don’t ask them leading questions/Probing (5 minutes)/ Wrapping up (5 minutes)

Users are unclear on the concept./ The words they’re looking for aren’t there/ There’s too much going on.

1. TED

TED provides subtitles and transcriptions in multiple languages and highlights sentences following speakers.

2. Scope

https://www.scope.org.uk/

Scope is a website that helps people with disabilities. Therefore, the color contrast is strong throughout the page and the font is large. Interaction on the buttons is also obvious, and the whole style is clean and simple.

3. Gett.

Gett.is an Israeli developed technology platform solely focused on corporate Ground Transportation Management. This website has a button on the homepage for people with disabilities. When users click it, the entire website is in disability mode, based on their preferences.

4. Venmo

Venmo's pages have strong color contrast and are easy to use. If people with disabilities can't read the small text on the screen, they can use the QR code to add friends.

5. Google's screen readers.

People with low vision can hear photos by screen readers.

04

1.scent of information.

2.don’t have time for small talk; they want to get right to the point.

3.Your objective should always be to eliminate instructions entirely by making everything selfexplanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to the bare minimum.

06

a hierarchy, using signs to guide you.

the list of subsections.

Back button is the most used button in Web browsers.

navigation tells us what the site contains.

Navigation reveals content! And revealing the site may be even more important than guiding or

situating us.

Taps

07

Home page

Right off the bat, the Home page has to tell me what site this is and

Site hierarchy

Registration.

organized

Search.

Feature promos

Show me what I’m looking for.

...and what I’m not looking for.

Show me where to start.

no idea where to begin.

Establish credibility and trust.

page visibility

Like the Big Bang Theory, it’s based on the

idea that the first few seconds you spend on a new Web site or Web page are critical.

How to get the message across

The tagline.

The Welcome blurb.

The “Learn more.”

Use as much space as necessary

...but don’t use any more space than necessary.

Don’t use a mission statement as a Welcome blurb

to test.

1. Forbidden Planet

https://www.fpnyc.com

When I browse a bookstore website that contains monthly comics, magazines, toys, and other content, I worry that the homepage will be very busy. But this one does it cleanly: the search bar and tabs are placed together, and the selections are simple. My favorite is the subsection because you can choose the new releases information.

2. POLITICO

https://www.politico.com/

On news websites, words are crowded and noisy. POLITICO's navigation is very clear because it hides sections for a while. When you click the top left corner, the selections appear.

3. Sephora

https://www.sephora.com/

People always like to focus on new products, so Sephora has "New" as the first section. Sometimes advertisements are a little confusing and I will go straight to the section to find new products.

4. Reddit

https://www.reddit.com/

Reddit is a playful website for young people. It is interesting that the sections become icons. What I like most is to put the chat function in the place where it is easiest to view. Because this is a platform where users can communicate online, it's important to feel comfortable entering the conversation.

5. Uber eat

https://www.ubereats.com/

Most of the delivery sites are very similar. I like uber eat because it's flexible. When I drag down the page, the search bar is still displayed at the top so I don't have to drag the page up and down.

Chapter01

1. One click

2. Simple texts/content, no useless messages

3. Should be very clickable

4. The most important thing you can do is to understand the basic principle of eliminating question marks

5. I could list dozens of things that users shouldn’t spend their time thinking about, like

Where am I?

Where should I begin?

Where did they put _____?

What are the most important things on this page? Why did they call it that?

Is that an ad or part of the site?

6. Self-explanatory

Chapter02

1. The first link that catches their interest

2. Hurry

3. Users like to scan

4. What we see when we look at a page depends on what we have in mind

5. (a) the task at hand or (b) our current or ongoing personal interests. And of course, (c) the trigger words that are hardwired into our nervous systems, like “Free,” “Sale,” and “Sex,” and our own name.

6. We satisfice.

7. Guessing is more fun. surprising

8. Intentions of designers  and users are different

9. Makes users feel smart

Chapter03

1. Take advantage of conventions

2. Create effective visual hierarchies

3. Defined areas

4. Clickable

5. Format content to support scanning

6. The widely used or standardized design patterns.

7. The value of what you’re replacing

8. Aesthetic appeal

9. Importance/logic/nested

10. Visual noise.

11. Complexity and distractions/Disorganization/Clutter.

1. Achievement

In fact, I just read for ten minutes. But the sense of accomplishment motivated me to keep reading.

2. Surprise

While I was busy with my homework, an occasional glimpse of the details made me feel better.

3. Animation

I really like to watch Google's animations. If I'm not busy, I'll watch it several times and record it.

4. ZBrush

This is a 3d modeling software. I really like the touch of modeling.

5. Readable

Looking at a lot of functions on one page, I like the clean and simple layout

6. Security

This makes me feel a little better.

7. Caring notifications

Although I don't have a pet, I still think that these reminders are sweet. It's perfect for people who are too busy to care about their pets.

8. Moon

This is an app that shows the moon. The functions are very simple on one page. The design that you can drag the moon with your finger is interesting.

9. The loading page is impressive

Instead of a flat dynamic logo, I like this kind of shock, suddenly occupying the whole screen.

10. Verbal content

The verbalized uses bring the application closer to the users, as if the machine is talking to a human.

1. Too many download buttons.

When I was downloading an application from a non-local provider, the download page popped up. This overload of ads and buttons made me confused and assumed that my computer would get viruses.

2. Assistive touch 

The only function of this thing is to muting. Other functions are busy and it requires several steps to turn off.

3. Shein

This page has so many texts and colors that looks particularly noisy.

4. Spotify

The video and lyrics are separate. Why don't they make the lyrics float on the video？I sometimes need to glance at the video and miss the lyrics.

5. Baidu wangpan

This is a cloud storage where I store my photos. But there are more and more ads with various icons, which makes the whole page cluttered and disorganized. Luckily, this one will automatically upload photos when you open it, otherwise I wouldn't be able to find the upload button.