UX & UI

This is of the ‘ by ’ course notes. It focuses on UX and UI. In this part of the course you will hear from design experts about user experience and see examples of what to do and what to avoid. You will also learn how user experience and user interaction fits into product development. The aim of this part of the course is to give you knowledge and techniques of creating flows and features for your product.

Product Design by Google

Background

For those who haven’t seen Part 1 of this series, here is a little background info (skip this bit if you have seen Part 1). This article is essentially notes (similar to CliffsNotes or SparkNotes) that I have written for the ‘Product Design by Google’ course. The course consists of 129 lectures and exercises and it’s estimated to take about 2 months to complete.

Initially I wrote these notes for myself to help retain everything I’ve learnt but thought I’d kill two birds with one stone by learning as well as sharing this information with other fellow designers or people in general who are interested in the product design field. These notes are for those of you who may feel overwhelmed by all the UI and UX software and processes out there and would like a little less noise and want to drill down to the best practices. Who better to learn from but from Google who are one of the best in their field. These notes are also useful if you don’t have the time to do the course and would like a bit of a rundown. Alternatively, if you have completed the course they might come in handy to help retain what you’ve learnt. The ‘Product Design by Google’ is a great course and I highly recommend trying it out. You can enrol for free via Udacity which it’s an educational organisation that was founded by Sebastian Thrun founder of GoogleX and David Stavens an entrepreneur, and scientist who’s in the field of robotics, machine learning and artificial intelligence.

Summary

(skip the Summary if you have seen Part 1)

The ‘Product Design by Google’ course basically covers Silicon Valley startups best practices & frameworks used for product design. It teaches how to perform Google Design Sprint (developed at Google Ventures and exclusively taught in this course) to design, prototype and test your ideas. In addition, it covers how to design lo-fidelity mockups for products and capture appropriate metrics.

In the lectures you will hear from industry experts in the field which include:

Instructors:

Amir Shevat — VP Developer Experience at Twitch and was the former Developer Relations Program Manager at Google

Chris Saden — Full Stack Software Engineer at Udacity

Industry Professionals:

Jen Kozenski Devins — UX Designer Google Apps Accessibility

Nadya Direkova — Senior Designer at Google X

Richard Fulcher — Head of Google Material UX and Engineering

Tomer Sharon — Senior UX Researcher at Google

Aaron Harris — Partner of Y Combinator

Pete Koomen — Co-founder, CTO of Optimizely

Nir Eyal — Author on works related to behavioural economics, neuroscience and consumer psychology

Yunha Kim — Founder of Locket

Kaushik Pendurthi — Founder of Locket

Harpinder Singh — Partner Innovation Endeavors

Syllabus

(skip the Syllabus if you have seen Part 1)

The course is broken into four parts which include:

1) Ideation and Validation

Develop, validate and refine your ideas to ensure you’re building for product/market fit. Through case studies and interviews with founders, product experts, and investors, you will learn how to efficiently conduct user research and build an entrepreneurial mindset.

2) UX and UI (*this medium article will focus on just this section)

This part takes you beyond visual style to understand material design, building for accessibility, user flows and personas. You’ll hear about how startups make design decisions and learn from senior designers at Google on how they use design to emphasize the purpose of their products.

3) Design Sprint

Created by Google Ventures, the Design Sprint Process is widely used by teams seeking to design, prototype, and test their ideas with customers. In this part, Google’s leading Design Sprint Master will take you through all the steps required to validate your ideas and build mockups of your product.

4) Key Metrics

In the final section, you will learn to identify common metrics for websites and apps relating to traffic, customer satisfaction, and engagement. You will learn tools that can be used to monitor metrics and examples from startups on what metrics not to measure.

UX and UI

The ‘UX and UI’ part of the course will tackle the following topics:

· User Experience Design

· Interaction Design and Tasks

· Designing Flows and User Testing

· Prototypes

· Different Types of Design

· Material Design

· Accessible Design

· Basics to Accessible Design

· Accessible Guidelines

· Persona and Accessibility

· Common Design Elements

· Homepage Design

· Sign Ups and Onboarding

· Forms

· Notifications

· User Feedback and Ratings

· User Experience Design Resources

User Experience Design

In the beginning of this part of the course, Amir Shevat Google Program Manager chats with Richard Fulcher who is the Head of Google Material UX and Engineering. Richard gives Amir an overview of what User Experience Design is.

Left to Right: Amir Shevat and Richard Fulcher

User Experience Design:

  • It’s a big umbrella of several related disciplines that are all focused on the design of experiences to help an individual person achieve some kind of goal.
  • It covers a lot of different types of experiences, most commonly we think about software design, but it’s also things like environment design, and the design of physical products. It can even be things like event coordination. It’s kind of anything that a user experiences, that can be constructed for them.

There are 5 key concepts to user experience:

1) Users

2) Contexts

3) Tools

4) Tasks

5) Goals

User experience design is the study of users and their particular contexts which we study in order to design tools so that users can perform tasks with the tools to achieve their goals.

Users — The user is anyone who’s going to use the product of the service that you’re designing. And it’s really important to remember that, that this runs a really wide range. It’s very easy to think about designing for yourself when you are designing a product. You tend to think of this one super idealised user that you have in mind. But in reality, you’re going to be building this for people with very different levels of experience. With different contexts and different backgrounds that affect how they’ll perceive this thing that you built for them.

User Research — The key to knowing who the users are is through user research. User research involves taking the product that you’re working on and testing it in some way by having a user to come in and try and perform a series of tasks that you assign to them. You see how they do certain things, how they interact with the product and you see what problems or issues they might have with interacting with your product. User research really covers the whole end-to-end development of the product. Even before you’ve drawn your first screen, you can engage with user research to go into your potential users’ homes or workplaces, to start to understand that context that’s important to the way that they behave and what their goals are. Once you are almost finished and have shipped your product you can look at logs and try to analyse usage patterns, see what people are doing with your product. You look for things such as see areas that they’re spending a lot of time in that you haven’t anticipated.

Interaction Design and Tasks

In this section Richard discusses Interaction Design and Tasks, he mentions that most interaction designers are going to spend a lot of time grappling with tasks. Designers have to think about what are the different tasks that the user is going to perform inside of this product. For every given task the designer is going to try to figure out that sequence of interactions that the user is going to have.

How to develop user tasks:

  • Think about it like a dialogue, think about well if user does x, the system’s going to do y, and then the user is going to come back and do z.
  • Once you go through it like a dialogue you start to shape a task and then go broader and broader. You think about other variants of that same task for example, if the user does w instead of y how does the system respond to that.
  • Once you do that this will help you understand what some of the constraints are and what are some of the things that need to be accounted for in the design. From there you can go bigger and bigger by thinking about the next task and chaining those tasks in interesting ways.
  • You’ll start to see commonalities; tasks will be similar or might even be the same to each other. You’ll also notice tasks that are really unique particular tasks that have very one-off set of interactions that don’t occur elsewhere.
  • You’ll then map the interactions and try to anticipate as many interactions are you can. This will make it easier for the user to follow through on the goals inside your product.

Designing Flows & User Testing

Once the user tasks have been worked out the next step is to design the user flow and conduct user testing.

Apple Watch Flows

The process involves:

  • Start drawing the screens. Pick up a pen or white board marker, a mouse or a Wacom pen which ever method is okay. You then start to try and imagine what these scenes, these environments that the user’s going to interact with will actually look like. Richard mentions he personally likes to use the traditional method of paper and pen in the initial stages. In the refining stage he then moves onto digital methods and using design software which are listed further on. Richard says:

“I love paper and pencil. But at some point you get more and more detailed with what you’re doing. So you can start very coarse. You can just start with a white board or scraps of paper because you want to kind of fail quickly. You want to draw out things, realise what’s wrong with them, crumple them up, and throw them away. And draw them again. A lot of what I do as a designer is iteration. And there’s a saying that writing is rewriting, that applies to design as well. Design is redesigning. So you design it to show it to someone, you get some feedback, and then you redesign it. And you often will draw a lot of different things. And just kind of get a feel for, from feedback and from your own experience, and from the understanding of the user that you’ve built up through all those other steps.”

  • Go back to the tasks that were settled on and figure out what the pieces of information that they need to see such as:

What are the pieces of information that they need to see?

What are the pieces of information they need to provide?

How do all those fit together on the screen to support that task?

  • From there you can start building one screen and maybe a couple of screens that cover that task. Drawing up the screens is called wireframing. A wireframe is a layout of a screen that demonstrates what the interface elements will exist on key pages.
  • You start to look for connections, look for things that happened earlier to the user and see what brought them to this stage. You also think about things that they want to do from that point once they complete that task, where do they want to go.
  • You start to get all these screens and can build flows and connect them. From here you get a sense of which things are really important and which things are less important or frequently used. From this you can build out the structure for the experience.
  • From thinking about the user and what areas of the product they spend more time on you can begin to build the overall navigation. Think about what areas they would then hop over into, this will really guide you on how to structure the navigation.
  • It’s not about designing for every single userflow. Richards states:

“It’s good if you can get to a smaller number of patterns that the user has to learn rather than the user having to learn 100 different styles of working with your app.”

  • The next step is when you have designed your userflows you want to ask yourself the following questions:

Have you covered all of those tasks that you want to address?

Have you completely solved the problem you were looking at?

Does the product have a point of view about what things are important and which aren’t? If you have tasks that are high priority make the user feel like those are important. Stress that those tasks are important so the user knows that this is what this product is about.

  • It’s good to conduct testing on the coarse sketched userflow designs which is paper based prototypes, it’s even better to conduct testing on rough interactive prototypes and you can use a variety of software. This method of testing the rough prototypes helps address your hypotheses on what solutions make the most sense.
  • From testing address the following:

Have you covered all the issues that arose from testing?

Have you addressed those high priority items?

Have you solved the problem you set out to solve?

  • Go back to those original goals and see if you are actually meeting what you understand to be the users needs. Richard stresses to do rapid prototyping as rapidly as you can:

“You should do that as rapidly as you can. You know, even if you’re just testing things on paper, prototyping it out. Using kind of the simplest tools that you can do. You have that analysis phase and then once you move into design, design and prototyping should be very much hand in hand. The closer you get to something that feels like a real experience to a user, the better feedback you’re going to get from them. So, you want to get to that point as rapidly as you can.”

Useful Links:

Build it with the user in mind: How to Design User Flows

Interviewing Users

A 5-Step Process for conducting user research

The UX Research Plan That Stakeholders Love

User and Task Analysis for Interface Design Book

Common Software for creating flows and wireframes:

LucidChart

Microsoft Visio

Creately

Pidoco

Balsamiq

Omnigraffle

Moqups

Which software is the best — Comparison between some of these different flowchart software

Prototyping

The quicker you create a prototype and put in front of a user the better. Paper prototypes and low-fidelity prototypes are the quickest to create. However, the closer you are to getting something that feels like the real experience the better the feedback you’re going to get from the user. High-fidelity prototypes are the closest resemblance to the final design.

There’s different levels of prototypes out there:

Paper prototyping — In the high tech world of digital design, sometimes the best method is still pen and paper. The technique is based on creating hand drawings of different screens that represent user interfaces of a product. This simple technique can be useful when a product team needs to explore different ideas and refine designs quickly. This is especially useful in the early stages of design when the team is trying out different approaches.

image credit to Paper Prototype

Low-fidelity prototyping — Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts into tangible and testable items. The role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product.

image credit Still Doing High-Fidelity Slowly?

High-fidelity prototyping — High-fidelity (hi-fi) prototypes appear and function similar to the actual product that will be shipped. Teams usually create hi-fi prototypes when they have a good understanding of what they are going to build and they need to either test it with real users or get final-design approval from stakeholders.

image credit to Adobe Blog

Common Software for prototyping and wireframing:

Invision

Flinto

Figma

Axure RP

Marvelapp

Justinmind

Proto.io

Origami.Design

FluidUI

Prottapp

Balsamiq

Moqups

Webflow

Mockplus

UXpin

Adobe XD

Which software is the best — Comparison between some of these different prototyping software

Different Types of Design

In this part of the course Richard Fulcher describes the different types of designs out there.

Interaction design — focuses on trying to understand users and behaviours. They think about the types of things that the user wants to do.

Visual design — focuses on everything that the user sees while they’re engaging with your experience. They focus on layout, scale, iconography, typography, colour, anything that becomes a pixel in that piece of software. There’s thousands of small decisions that go into that.

Motion design — motion designers are concerned with how anything animates. Motion is a good way to give the user a sense that their feedback is being heard and that the system’s responding to it. They bring the product to life by making it a lot more engaging. Animation is a great way to tell the user where their attention should be focused at any given time.

Industrial Design — focuses on the design of physical objects.

Sound design — focuses on everything that the user hears when interacting with the product.

Print design — focuses on colours, images, fonts, basically graphical elements that are printed on physical materials.

Richard mentions:

“Anything that you’re doing on this product that has some decision that needs to be made, there’s probably a whole discipline of design that can help you make that decision. So I know most small teams just don’t have that capacity to hire out all the specialisations. So the good news is that, in my experience, most designers are hybrids. They might identify as being one of those specialisations, but they often have familiarity to varying degrees with the other fields of the discipline. So what’s important to keep in mind when you hire is kind of have a sense of what your expectations are going to be. What are you going to need out of this designer? Do you need interaction and visual? Do they need to work on your brand for you? And make sure that the capabilities are in the people that you hire. Or, make sure that they are comfortable directing the work of contractors who might be able to kind of augment the capabilities that they lack.”

Common software for UI Design:

Sketch (noticed in the lectures most of the Google team where using Sketch)

Figma

Adobe XD

Material Design

In this section Richard Fulcher goes into detail of what Google Material Design is and what problems does Google Material Design try to solve:

  • It’s about trying to maintain that design continuity between all the different devices.

“Well, the question of how a user goes between all these different devices is a key one. And to the user, it’s really just they’re doing this one task. They’re trying to do this one thing and it doesn’t matter so much to them whether it happens to be on the phone in their pocket, or the laptop that’s on their desk. So we want that kind of continuity.”

  • It focuses greatly on motion. Designers at Google try to think of motion from the very start of the design process. Knowing how things move is very powerful, it gives feedback to the user of what they’re doing.

“Something else we really focus on is motion. We’ve seen all too often that motion is something that just kind of gets tacked on at the end. We try to think about motion from the very start, because we think that kind of knowing how things are going to move around is so powerful for giving feedback to the user about what they’re doing. So, you want to kind of plan for that in advance.”

  • It has a connection to physical materials. The inspiration comes from design and material. The look of material design is meant to give that familiarity to the physical world.

“And we try to have these materials that give the material design it’s name. Or things like paper and ink that can move in predictable ways that feel tactile and feel familiar to the user, but aren’t bound by boring old reality. It can do these really interesting things that makes the user feel powerful, and that’s a key goal towards giving them a satisfying experience.”

Find out more here > Google Material Design

For more information on Google Material Design check out the link above. The Google Material Design site provides the full specification, a set of guidelines that describes material design. It breaks down the philosophy behind it and gives you some key principles to employ. It’s richly illustrated with imagery, with motion and samples of video. It also has a lot of resources that you can download such as fonts, colour palettes, sticker sheets of common components for all of the typical design tools that you might use. These can be used out of the box so you don’t have to reinvent the wheel.

Accessible Design

In this section Chris Saden, Udacity instructor and Software Engineer speaks with Jen Kozenski Devins, UX Designer from Google Apps Accessibility. Jen discusses the importance of Accessible Design and mentions that it’s extremely important unfortunately a lot of people overlook it in the initial part of building a product.

Left to Right: Chris Saden and Jen Kozenski Devins

What’s Accessibility?
Accessibility is about trying to make products that are accessible and usable by all people regardless if they have a disability or not. It’s closely related to universal design which is all about the process of making products usable by people with all ranges of abilities, allowing a product to be used in all ranges of situations.

Impairments

There are all sorts of impairments that people might bring to a product that might prevent them from successfully using a product. There are a number of common impairments that are considered which range from:

  • Visual impairments for example being colour blind
  • Hearing impairments
  • Cognitive impairments
  • Motor impairments

Things to note when designing for accessibility:

  • There is a wide range of severity within each of these impairments e.g. you could have just a slight vision loss to being totally blind.
  • A lot of people tend to have multiple impairments at one time.
  • When designing for people with disabilities, a lot of people tend to treat them as they’re a separate group. However, in reality everyone may have some impairment within their lifetime and these can be temporary like a broken arm, they can be situational like holding your grocery bags and not being able to see your small phone screen or they can be natural progression of ageing.
  • There’s actually a large population of people with disabilities. Jen mentions:

“There’s a lot of great research out there about the demographics of people and we compiled some research and noted that there are more people with colour blindness than there are native English speakers in the world. So this is a huge population.”

Motivators of designing for Accessibility:

  • If you are affiliated with Education, Government or Health there are legal considerations and legal standards that need to be met.
  • Designing for Accessibility often leads to a much better product for everyone.

Basics to Accessible Design

Jen stresses that a product maker should start thinking about accessibility from the beginning, immediately. Jen mentions is very critical to be thinking about accessibility during the product conception phase. You should be thinking about how the product can really benefit and improve the life of a user with or without a disability. Think about how the product can be used in various situations.

How to start off with Accessibility Design:

  • Team members should become familiar with accessibility basics.
  • Understand the needs of users with disabilities. Reach out to users that you think will be your end user and understand their needs, their challenges, their pain points. This applies to users with or without disabilities.
  • Be familiar with assistive technologies. Assistive technologies are tools that a number of people use to just help them achieve the same task that other people would with just a little bit of assistance.

Jen describes examples of assistive technologies:

“So examples of this are closed captioning in videos, where you can see the words that are being said. You see those typed at the bottom of those. There are magnification devices that people with low vision might need to use. There are screen meters, which essentially read the contents of the screens to the users. So you don’t have to become an expert on these, by any means, because that would take forever. But just understanding the basics, as well as, watching and observing somebody use these. Specifically, watching them, use the technologies with your product is again, it’s one of the most eye opening experiences I’ve ever had.”

  • Keep in mind there are a number of online resources for accessibility design guidelines that gives you lots of points of what to consider when you’re designing.
  • If you are at the visual stage of the design you want to be thinking about good colour contrast so that users with low vision can actually read what’s on the screen or on the page.

Useful links that were provided:

Google Material Design Accessibility

Apple Accessibility

Web Content Accessibility Guidelines

SEE — Chrome Plugin that lets you view the web as a visually impaired user

UX Myths

Color Safe

Accessible Guidelines

Things to consider when designing for accessibility:

  • Touch targets for mobile screens should be large and have enough space between other touch targets so users can tap them easily. Use 40 x 40pt clickable area for touch controls, anything less will cause trouble for some users.
  • Overall interfaces should be simple and they should provide alternative ways of navigating. When thinking about interaction design you want to ensure for keyboard users that all tasks can be completed on a keyboard. Implement keyboard navigation, hotkey shortcuts, make sure to use tab as a form of navigation.
  • Colour contrast should meet a specific ratio. It’s a standard that’s been set by the Web Content Accessibility Guidelines. Make sure there is a good contrast between the text and background colours.
  • Text should be legible, (there’s a lot of online usability testing colour contract checkers out there to check if text is legible) it checks for size, colour and the typography. Ensure there’s sufficient contrast between text and background. Colour Contrast Guidelines
  • Don’t rely exclusively on colour as a visual means of conveying info, they say that 10% of the population is colour blind. Example don’t just use colour for categorisation of sections, you can use labels and iconography.
  • Include link descriptions and image descriptions.

Jen brings up OXO Website’s philosopy towards Universal design which she believes is a great philosopy and is well summed up in one of their quotes:

“When we talk about designing for accessibility or universal design, it’s important to note that that does not mean designing products fully usable by everybody, since there is no product that can truly fulfill the needs of all users. But, when all users’ needs are taken into consideration in the initial design process, design process, the result is a product that can be used by the broadest spectrum of users.”

Personas and Accessibility

In this section Jen talks about personas and accessibility and mentions with all personas you want those to be based on information from talking to real users. You want to go out and actually talk with people who have these impairments. When developing these personas there are key pieces of information that you want to include such as:

  • What is their impairment?
  • What is the severity of it?
  • How do they tackle and get through their daily challenges with the impairment?
  • What are certain assistive technologies that they use?
  • What’s or how experienced are they with those assistive technologies?
  • What’s their skill level?
  • What are their pain points in trying to achieve tasks that are related to your product?
  • Get in some important insights into how they go about completing tasks, and what are some of their different approaches that they might take that maybe other users that you’ve already spoken to haven’t.

Accessibility User Research Ideas

Here are some ideas to help you find users with accessibility issues to test out your designs.

  • Reach out to your network to ask people who they know who may be older or may have slight impairments.
  • Senior service communities such as retirement homes or retirement services.
  • Centres that help people with disabilities such as Centres for Persons with Disabilities
  • LinkedIn Groups promoting accessibility
  • Authors and UX designers who write about accessibility designs. They will know groups of people to reach out to help you test your accessibility designs.
  • Organisations promoting accessibility such as the Web Accessibility Group

Creating Personas

A process of creating personas is described in this section:

  • Split sections on a paper into 4 quadrants
  • Quadrant 1 — Include a sketch of the person, or a picture of the person, and their name.
  • Quadrant 2— Add demographic information that leads to specific types of behaviours.
  • Quadrant 3— Add their pain points and their needs.
  • Quadrant 4— Finally this is where the product comes to play, this is where you pull all your solutions for that user.

Make note

Try to differentiate personas around pain points, needs, and their behaviors. By designing your product for their behaviors or their different pain points and needs, you could really target different users. You can create a persona using any tool of your choice. Personas should be included with a userflow that shows how a user would complete a task, and how the user would interact in the main navigation or flows of your product.

Useful links:

UX Myths

Personas for Accessible UX

Examples of Journey Maps, Personas, Userflows, Sitemaps and other UX visualisations

Example of a Persona

Common Design Elements

Below are some common terms that you’ll encounter when discussing the design of webpages and apps.

Copy — Refers to written material included in your product (in contrast to photographs or other elements of layout).

Headline — Words that communicate what the company or product does; different headlines will work for different products and user goals; choose wisely.

Tagline — Taglines contain phrases that explain the key benefits and purpose of your product. Taglines are critical because people scan websites, especially first time visitors who are just beginning to understand your product.

Value proposition — A promise of value to be delivered and acknowledged. A belief from the customer that value will be delivered and experienced. A value proposition can apply to an entire organisation, or parts thereof, or customer accounts, or products or services.

Below the fold — The content area of a screen that is not visible without scrolling; many website home pages contain additional content “below the fold”.

Call to action (CTA) — An instruction to the audience to provoke an immediate response, usually using an imperative verb such as “call now”, “sign up”, “buy now”, or “visit a store today”; these often take the form of buttons.

Useful links:

The Ultimate Home Page Headline

Website Taglines

Creating a Memorable Headline/Tagline: 20 Great Examples

Improving Conversations: Call to Action Buttons

Homepage Design

The home screen of a website or the loading screen of your mobile app, will be the first impression for users. And you want to make sure that you get this right.

image credit to Creddy

Things to consider:

  • A clear goal headlines the page, and there’s plenty of white space around the headlines, and the tagline to draw users into them.
  • The Homepage should answer the following questions such as, What is this? What is being offered? What can I do here? And how do I start?
  • You want all of this information to be present, but you should also be careful not to overwhelm your users.
  • You want users to have a clear understanding of what you offer, and then you can link to other pages for users to learn more about your product or services.
  • Links to other pages are generally added to the footer at the bottom of the page. This is called the sitemap.
  • On the top of the page is generally the main navigation.
  • You need to strive for an informative page, and at the best, your homepage should be memorable. You want to make a fantastic first impression. It’s really up to you to delight users so that way they come to know who you are and what you have to offer.
  • It’s important to keep in mind that your homepage doesn’t have to be static. Your homepage might also be dynamic in that you might be AB testing certain features of it to see what drives users actions.
  • When designing the homepage ask yourself what are the elements that comprise the homepage such as what are the main calls to action, what does that homepage say about the company, its users and the value proposition? And what are the most likely flows from the homepage to other places on the site? In other words, what could you do from the homepage?

A/B Testing

Optimizely’s definition of A/B Testing:

A/B testing (also known as split testing or bucket testing) is a method of comparing two versions of a webpage or app against each other to determine which one performs better. AB testing is essentially an experiment where two or more variants of a page are shown to users at random, and statistical analysis is used to determine which variation performs better for a given conversion goal.

Useful links provided:

Optimizely

15 Examples of Brilliant Homepages

5 Homepage Design Best Practices

9 Steps to Optimize Your Homepage

The Homepages of 20 SaaS (Software as a Service) Startups

Design Practices to Avoid on Your Homepage

When Design Best Practices Become Performance Worst Practices

Improving Conversions: Call to Action Buttons

A/B Testing Headlines on the Highrise Signup Page

Turbotax makes filing (almost) fun

Google Venture on how to design a killer website

Sign Ups and Onboarding

Once users have accessed your homepage or your application, you’ll likely want the user to register for an account. But this isn’t always the case. You should keep in mind that registration doesn’t have to be the next immediate step in your process.

image credit to Invision

You should think carefully about the entire user experience, the product you’re offering, and when you want registration to happen, if you want registration to happen at all. Registration is generally fairly simple with just a couple fields or you could also login using Facebook or Google.

For more detailed examples of sign ups and onboarding, check out:

User Onboarding

MindMeister

Gumroad

Gmail

You can walk through examples and observe all the design elements that guide first time users. Look at the details such as animations text annotations, tool tips, and call to action, all of these lead the user to successfully using the product for the first time.

Now, there are many ways to build out a successful onboarding experience. The best piece of advice is to test your ideas with users using wireframes and mockups. This will be covered in the third part of the course in the design sprint section of the course.

Useful links:

How Popular Website Onboard Users

UX Archive: Onboarding

4 Ways to Design Better Login Screens (GoSquared Example)

Testing Yammers Signup Flow

5 UX Antipatterns to Avoid with Signups

First Time UX

Design Review Podcast: Onboarding

Forms

Signup and payment forms require you to get and verify information from the user. There’s lots of advice for creating forms, and Google has curated some of the best resources and examples from existing products and the web.

image credit to Regina Smirnova

First, keep it simple. Users are more likely to complete forms, signup, and pay, when those forms are easy and intuitive. Clear descriptions, vertical layouts, pre-populated forms, examples, and clear calls to action can help users make sense of the form and make them more willing to spend the time to fill them out. This also means that you should only ask for as much information as you need.

Second, validate user input and provide feedback. Next, you can increase the chance that users succeed by designing forms by checking what user’s type and by providing corrective feedback, examples, and even suggestions. Is the user’s phone number in the correct format? Did the user choose a username that is already taken? Does the form verify input after the user finishes typing in each box? These are essential features of your form that can drive up the number of successful users.

Finally, always test your forms. You can test the form yourself. Some teams have done this by a role play between a user and a browser. The browser can only respond with the copy on the page. Is the form easy to complete? Are formatting options clear? Did the user get stuck, frustrated, or lost?

For more information on designing forms, check out these awesome resources:

Why Details Matter in Payments: Conversions!

The $300 Million Button On BestBuy.com, the small change of allowing people to skip sign-up during checkout resulted in $300 million extra revenue per year.

Double Conversion Rates with Optional Fields ClickTale doubled their sign-up conversions from 40% to 80% with a simple change of adding an explicit and very visible “optional” label to the phone number input box.

Effective Form Design

Optimizing Forms for Greater Conversion
Extensive Guide to Web Form Usability (Smashing Magazine)
Designing Form Validation the Right Way
The Top 5 Books about Form Design

Focus on Mobile Forms

Mobile Form Design Strategies
Removing Stumbling Blocks in Mobile Forms
21 First Class Examples of Effective Web Form Design

Payment Forms

User Experience and the Credit Card Payment Form

Checkout Flows

The First Step of Checkout (KISSmetrics blog)
Fundamental Guidelines of E-Commerce Checkout Design
5 Design Tips to Prevent Shopping Cart Abandonment
How to Design an Ecommerce Checkout Flow that Converts

Notifications

Another big piece of the user experience are notifications. Notifications allow you to communicate with the user, and they can take many different forms, text messages, emails, push notifications, icons, vibrations, banners, and alerts. You’ll need to think carefully about how often you notify users and what forms those notifications take, since they contribute to the overall user experience.

  • In general, you want to avoid sending many messages that have low importance and low urgency. If you’re sending a lot of these types of messages, it can make your product feel spammy. Keep in mind that the frequency for a given notification may change over time, and this might be different for different personas using the product.
  • You should think about different notifications for different personas as you work on your product. Some might have preferences for one notification over others.

Key qualities of notifications:

Control — The important thing that you want to give users is control of receiving notifications. You should keep in mind of your users and give them the ability to turn on or off notifications.

Feedback — Other types of notifications involve informing the user about tasks that they are performing. This is really just about good design in user experience. The feedback provided is dependent on the product. And by providing great feedback, you can make users feel like you’re looking out for them while making the product more usable. For example, Twitter will try and provide feedback if you send the same tweet twice. Slack, a messaging app also provides great feedback to users. It provides a confirmation when sending a message to a channel that has people in different time zones. And Amazon provides feedback about whether someone may have bought you an item on your Wish List. All of these notifications are related to feedback loops for users to successfully complete tasks.

Customisation — It’s a more subtle aspect of notifications for your users. You might do this based on time, task, location or some other attribute that’s tied to the user. Facebook for example, shows a different part of the world to users, depending on the user’s location.

Frequency and Reward — Finally, you can develop notifications that lead users to form a habit of using your product depending on the frequency and any rewards you might give them. You can tap into what Nir Eyal describes as variable rewards. GitHub provides variable rewards to its users by showing a different Octocat each time the user has no new notifications. Tumblr sends emails with playful texts when a user follows someone or when someone else follows that user. And, Coffee Meets Bagel, which is a dating application, uses digital currency to reward users for tapping into the dating app. Each of these qualities contributes to the user experience and their perception of your product.

Useful links:

The Psychology of Notifications

User Friendly Notifications

Rethinking On Site Notifications

Notifications are a UX AntiPattern (Use Notifications for Positive Habits)

User Feedback and Ratings

In this part of the course it talks about user feedback and how important it is to make sure that you get feedback from users every step of the way.

Feedback takes a lot of different forms, such as:

Conducting user research to inform your business idea or you might try incorporating a survey into your product. You could send these out each week or month to collect feedback, or you might even try and embed them in some way into your product.

Social media is another great way to monitor early usage of your product, and have customers connect to your brand.

App ratings, or user ratings, or website ratings, are another way to understand quantitatively, and qualitatively what users think of your product. One app, which is called Circa News provides the following guidance on ratings. First, they recommend that you just build a great product. If you don’t build a great product, users aren’t going to give you good ratings in the first place. Secondly, don’t annoy the users. You should really only ask them to rate your product if they’ve had a good experience and they’ve used the product for a little bit. And finally, Circa News recommends that you ask nicely, and maybe even reward your users for rating the app.

You should make customer support everyone’s job. You might have a dedicated email or chat service that lets users talk directly to employees. Former CCO, and co-founder of Kayak, Paul English, went so far as putting the very loud phone in the middle of the engineers. He reasoned that if the same calls kept coming in, then the team would work quickly to resolve the problems. This would likely resolve the same problems that other users were facing. No matter which strategy you use, you should think about when you’ll intercept users and how you will respond to them. Your actions and improvements to your product can speak just as loudly as individual follow ups. But do remember that these experiences also contribute to the user’s experience and their perception of the product.

Useful links:

Better User Research through Surveys

Incorporating Customer Feedback into Your Startup Strategy

The Right Way to Ask Users to Review Your App (Circa News)

Get Better Qualitative Data on Your User Experience with Microfeedback

Increase Mobile App Reviews

Increasing Customer Retention

User Experience Design Resources

These resources can help you analyse other products and learn from others about what does work and what doesn’t.

UX Archive

Explore how others approach designing for specific tasks. Use the archive to compare different design approaches for the same task. This will help you visualise all the flows and steps so you can compare the approaches more easily. Let this inspire design pattern and user flow discussions with you and your team.

Google Ventures Library: Guide to User Research

Google Ventures has an excellent library of resources related to conducting user research. Look for articles that you think are most helpful to you.

Blogs, Weekly Learning

Product Psychology (Nir Eyal and many experts on user behavior)
UX Myths
52 Weeks of UX

Articles

Unbreakable Laws of User Interface Design
Design for Delight (52 Weeks of UX)
Why Invest in User Experience and Research?
What are the best steps to teach yourself UI/UX Design (Quora)

Books

UX Lean Startups Experience Research
Don’t Make Me Think
Rocket Surgery Made Easy (How to do User Testing)
Information Architecture for the World Wide Web
A Practical Guide to Usability Testing
Defensive Design for the Web
The Persona Lifecycle: Keeping People in Mind Throughout the Product Design (Interactive Technologies)

Last Word

Thanks for reading this article. If you found this helpful, check back soon on my Medium account for the next part of the Google Product Design course. The next topic will be Design Sprint Process. Don’t forget to check out the actual course itself via Udacity.

A little background

Hi, I’m Christine 🙂 I’m a product designer who’s been in the digital field for quite some time and have worked at many different companies; from large companies (as large as 84,000 employees), to mid size and to very small startups still making a name for themselves. Despite having a lot of experience I’m a product designer who has a fear of suffering from the dunning-kruger effect and so I’m continuously trying to educate myself and I’m always searching for more light. I believe to be a great designer you need to constantly hone your skills especially if you are working in the digital space which is constantly in motion.



Source link https://blog..io/product-design-by-google-part-2-87137fb1a05e?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here