Presentation Rules for Good UI Design

What separates a good user interface from a bad one? How do you make sure that your customers' experience with your software leaves them feeling good about you? We will go over some rules, tips, and tricks for designing a good user interface that will hopefully lead you to building better and more usable applications in the future.
Published on: 2011-12-20T07:25:01.000Z
Channel: Devoxx'11 (all)
Tags: gui RIA design
Speakers:

Joe Nuxoll

JavaPosse.com Member

Slides:

Rules for Good UI Design

Rules for Good UI Design rules, tips and tricks for designing an enjoyable software experience Joe Nuxoll

@joeracer

Joe Nuxoll

Joe Nuxoll @joeracer @javaposse

What is UI?

What is UI? User Interface?

What is UX?

What is UX? User Experience?

Cartoon

User Experience Elements

User Experience

User Experience: How your software works in the real world, or how a person feels about using your product. Jason Putori

Going through the sign up flow

Going through the sign up flow Completing a task in the product Error message in the product Jason Putori

Customer Experience:

Customer Experience: The sum of all interactions a customer has with your company, positive or negative. Jason Putori

Going through the sign up flow

Going through the sign up flow +5 Completing a task in the product +10 Error message in the product -5 Viewing your home page +1 Reading a marketing email -10 Dealing with customer service -5 Jason Putori

User Experience = Human Experience

User Experience = Human Experience People prefer software that helps them by making their life easier - not more difficult

User Experience = Human Experience

User Experience = Human Experience People prefer software that helps them by making their life easier - not more difficult

Design + Engineering

What is design?

What is engineering?

Marketing / Product Folks

· Marketing / Product Folks · Designers (Visual / Interaction) · Front-end UI Developers (HTML/CSS/JS) · Web UI Developers (Java/.NET/PHP/...) · Back-end Developers (services, db, ...)

Marketing / Product Folks

· Marketing / Product Folks · Designers (Visual / Interaction) · Front-end UI Developers (HTML/CSS/JS) ENGINEERING / IT ·Web UI Developers (Java/.NET/PHP/...) · · Back-end Developers (services, db, ...)

Marketing / Product Folks

· Marketing / Product Folks · Design Agency (Visual / Interaction) · Front-end UI Developers (HTML/CSS/JS) ENGINEERING / IT ·Web UI Developers (Java/.NET/PHP/...) · · Back-end Developers (services, db, ...)

Marketing / Product Folks

· Marketing / Product Folks · Designers (Visual / Interaction) · Front-end UI Developers (HTML/CSS/JS) · Web UI Developers (Java/.NET/PHP/...) · Back-end Developers (services, db, ...)

UI Engineering

UI Engineering · Marketing / Product Folks · Designers (Visual / Interaction) · Front-end UI Developers (HTML/CSS/JS) · Web UI Developers (Java/.NET/PHP/...) · Back-end Developers (services, db, ...)

Web 2

Web 2 Mobile RIAs

Design = UI Engineering

Design = UI Engineering UI Engineering = Design

Agile

Agile Design and Engineering need to work together more closely

Cross Train

X-Train Fundamentals

X-Train Fundamentals · These are very different fields for some · They are closely related for others · Educate engineers on design process · Educate designers on engineering process · Encourage dialog & mutual skills appreciation

TANGENT ALERT

TANGENT ALERT You're mostly engineers in here, so let's do some Cross Training right now!

A Design Process

Concept (Business Need)

1. Concept (Business Need) 2. Information Architecture (IA) / Interaction Design (ID) WIREFRAMES / FLOW CHARTS · · Iterate w/ Feedback Loop Prototype(s) 3. Visual Design (VD) / Interaction Polish HIGH FIDELITY MOCKUPS · · Iterate w/ Feedback Loop Prototype(s) 4. Production Plan

Internal Design Review / Ideation

Internal Design Review / Ideation · · · · · · Design team members in one room Tack-up mocks from each member Each member presents their concepts Everyone else provides clear, unfettered feedback and newly spawned ideas Everyone has an opinion, and that's okay nobody gets hurt DIRECTED SESSION

Design Review with Business

Design Review with Business · · · · Design Director presents concepts Everyone else provides feedback and newly spawned ideas Everyone has an opinion, and that's okay Design Director works hard to LISTEN and read between the lines, since most people aren't trained to give clear, unfettered feedback

Design is Subjective

Design is Subjective · Unlike pure engineering, there is no OBJECTIVELY CORRECT answer · There are principles to follow - the science of computer human interaction · Design Direction is key · Design by Committee FAILS · Design by Heuristics always WINS but often LOOKS ASSY

TANGENT ALERT

TANGENT ALERT Congratulations! Cross Training complete!

CoLocation

Co Location

Prototype Production

Prototype Prototype Prototype

Prototype Prototype Prototype Prototype Prototype Prototype Protot Prototype rototype Prototype Prototype Prototype Prototyp rototype Production Most Important to Business Most Likely to Affect Future Thinking

Okay, so how about those rules, tips and tricks?

The underlying data structure ...

The underlying data structure should NOT define the user interface.

Windows Form

Not typically aoffirst rule right?

· Not typically aoffirst rule right? but you're a bunch engineers, · Engineers think in terms of efficient storage & retrieval. · Should not be required to grok the data structure to be productive.

Screenshot

corollary

corollary The user interface should NOT define the underlying data structure.

Consider UI / data separately

· Consider UI / data separately · Be mindful of both · Often good UI uses a transform layer · UI-only services with separate cache

Need must proceed technology

Need must proceed technology.

Technology is a means to an end

· Technology is a means to an end. · Desktop? Mobile? Holodeck? Web? · Which flavor(s)? · Postpone platform choice until you know what you need to build. · How can you leverage shared tech?

Start the process with real use cases

Start the process with real use cases.

Why do we need the software?

· Why do we need the software? · What would be the ideal way to accomplish the intended task? equivalent process? · What is the existing zero-bits · Do we know that software can improve the existing process?

Identify distinct categories of people

Identify distinct categories of people that will be using your software.

Define personas if > 1

· Define personas if > 1 · How do they differ? · Enough significant differences to warrant a separate UI?

Think in flows, not features

Think in flows, not features.

UI is a moving, living thing

· UI is a moving, living thing. · Not a feature list or static screens · Static screen design is rarely adequate to understand scope. · People must experience your UI to form an opinion about it.

Prototype often

Prototype often. Abandon prototypes often.

If you can efficiently...

· If you can efficiently use your target platform for prototyping, great. · Don't over-commit to prototypes. · Prototypes should be built quickly, then tossed out with no regrets.

Make the next step obvious

Make the next step obvious.

Google

Form Example

Reduce the number of perceived things

Reduce the number of perceived things.

Cognitive load

· Cognitive load increases with each element on the screen this screen? · How much work is required to "win"

Perception

Perception: 1. Negative shape + aesthetics 2. Element parsing / counting 3. Tackle the first element emotional workload execute

Form

Tesla

Leverage muscle memory

Leverage muscle memory. Be consistent.

Apple Website

Think outside the page load

Think outside the page load. If you can do stuff in-place, do it.

Antwerp/Metropolis

Google Maps

Screenshot

Use transitions to change state

Use transitions to change state.

Visual / animated transition

· Visual / animated transition between states maintains context · Person has less trouble understanding where they went and how to get back

Demo Websites

Iterate & Refine

Iterate & Refine. Iterate & Refine.

Software is only bits

· Software is only bits. · Swap out the engine out of the 747 during flight. Go ahead. · Find out what your people like / dislike. · Never break the user experience.

Provide your customers with a great experience

Provide your customers with a great experience. Don't just get the damn product shipped.

Questions?

Rules for Good UI Design rules, tips and tricks for designing an enjoyable software experience Joe Nuxoll