10 ESSENTIALS TO MAKE YOUR PRODUCT USER-FRIENDLYA UX/UI Design Session with Mandy K Yu, Konrad Group

Who is Mandy?

What is UX/UI Design?

UX Design is the process of designing a solution that considers all the needs of the user.

UI Design is the overall visual aspect of the user’s experience.

1 Define Requirements

2 Wireframe

3 Design

4 Prototype

5 Test

Define

Design & Prototype

Test

Learn

What makes a digital product successful?

1. ResponsivenessCan your site be viewed across multiple screen sizes and devices?

Is your site mobile friendly?

Good UX/UI design is responsive across multiple devices and screen sizes.

Design with relative units (relative to screen size) rather than definite units (static units).

Don’t be afraid of stacking information for vertical scrolling on mobile.

2. User AdaptivenessIs your product tailored to each individual user?

The best apps grab user’s data to generate content and tailor it to the individual for a custom user experience.

3. Network AwarenessHow long does it take for content to load?

47% of consumers will leave a web page if it takes more than 3 seconds to load.

https://econsultancy.com/blog/10936-site-speed-case-studies-tips-and-tools-for-improving-your-conversion-rate/

4. Design ConsistencyHow can you maintain visual consistency throughout your site or app?

Style guides or style sheets act as a legend to define the styling of specific objects and elements.

5. Legibility & ReadabilityWhat typographic techniques can maximize readability?

What is the difference between legibility and readability?

Choosing the right typeface for the right purpose is a must for legibility.

THIS IS A HEADERTHIS IS COPY TEXT THAT GOES UNDER A HEADER TO DESCRIBE

A CERTAIN SECTION AND USUALLY INVOLVES A FEW

PARAGRAPHS OR LINES OF CONTENT

THIS IS A HEADERThis is copy text that goes under a header to describe a certain section and

usually involves a few paragraphs or lines of content.

Typesetting large quantities of text is crucial to maximize readability.

Leading example (tight leading):

Tracking example (loose tracking):

Font size example (too small):

Paragraph formatting example (justified text vs. left aligned):

6. Hover ControlsHow can you minimize clutter on your page and in what ways can you use hover states to do so?

What do you want users to focus at first glance?

Hide action items and use hover controls to minimize clutter.

Show items one at a time.

7. Leveraging Empty StatesHow can I take advantage of an empty state?

Educate: Teach users how to use your app.

Prompt: Drive an action by providing users with next steps.

8. User Behaviour ConsistencyAre users accustomed to the behaviours of your product?

How easy is it for users to navigate or use your site or app? (Intuitive icons, labels, etc)

Can you figure out the functionality of the icons at the bottom navigation bar?

First time users will have a hard time understanding abstract or uncommon icons.

Radio Library Search

Using icons that users are accustomed to provides a better experience and minimizes a wide learning curve.

9. Interactivity & MotionHow can you incorporate motion to add an extra layer user satisfaction? (Use of motion during transitions, scrolling, or expanding objects)

10. User TestingTest test test! Validate your product.

● Responsiveness

● User Adaptiveness

● Network Awareness

● Design Consistency

● Legibility & Readability

10 Essentials:

● Hover Controls

● Leveraging Empty States

● User Behaviour Consistency

● Interactivity & Motion

● User Testing

QUESTIONS?

My ResourcesInVision Blog (Articles)

Pttrns.com (User Trends)

Dribbble.com (Design Inspiration)

Intro to InDesign Weekend WorkshopSaturday, Nov 21 - @ 10am

Learn the fundamentals and essentials of the software that

professional designers and marketers use to craft beautiful

presentations that will blow your audience away.

THANK YOU!@mandyklyu

mandykyu.com