ui consistency vs ux

57
UI Consistency vs. UX Bulgaria Web Summit 2015 18 April 2015

Upload: vasil-yordanov

Post on 15-Jul-2015

373 views

Category:

Design


1 download

TRANSCRIPT

UI Consistency vs. UXBulgaria Web Summit 201518 April 2015

Vasil YordanovSenior UX Designer at Telerik, A Progress Company

@yordanov

User Interface Consistency vs.

User Experience

Yes, I’m a button!

Our goal is to create and inspire simple, consistent and contemporary experiences for user productivity, through iterative research driven user understanding, innovative design and best practices.

ARIN BHOWMICK – Vice President, User Experience & Product Design, Progress

User Experience @ Progress

Any Browser Any Device Any Location

Organize

Economize

or

Communicate

Consistent Visuals and Interactivity

Consistent Communication

Consistent Organisation and Layout

Consistencyor …

Inconsistency

What is Consistency?and

How to identify it?

Dimensions of Consistency

It’s me again :)

button { position: absolute; top: 100px; left: 100px; margin: 0;}

Layout

Sizebutton { width: 200px; height: 32px; line-height: 32px; border-width: 2px;}

Color and Texturebutton { background-color: blue; background-image: button.png; border-color: blue; color: white;}

Shapebutton { border-radius: 50%;}

Typographybutton { font-family: Georgia; font-size: 24px; font-weight: normal; text-transform: uppercase;}

Animations and Transitionsbutton:hover { transition: background 1s; transform: rotate(180deg);}

Properties button { position: absolute; top: 100px; left: 100px; margin: 0; width: 200px; height: 32px; line-height: 32px; border-width: 2px; border-radius: 50%; border-color: blue; background-color: blue; background-image: button.png; color: white; font-family: Georgia; font-size: 24px; font-weight: normal; text-transform: uppercase;}

Interaction states

Source: http://www.google.com/design/spec/

x~20properties

~5states

≈ 100consistency dimensions

Internal Consistency

Source: http://www.telerik.com

External Consistency

Real-World Consistency

Source: OS X Human Interface Guidelines

Internal Consistency External ConsistencyReal-world Consistency

Consistency is not easy.

Avoid Surprises

Pay Attention to Ease of Learning and Ease of Use.

Use Design Patterns and Best Practices.

www.goodui.org

Break up your UI.

Create and Adhere to Guidelines.

Source: Material Design Guidelines

- Surprises

- Ease of Learning vs. Ease of Use

- Design Patterns and Best Practices

- UI segmentation

- UI Guidelines

?UX

User ? UX

Product ? UX

CONSISTENCY STREAM

USER PRODUCT

CONSISTENCY STREAM

USER PRODUCTGOOD

UX

CONSISTENCY STREAM

USER PRODUCTBAD

UX

CONSISTENCY STREAM

USER PRODUCTBAD

UX

CONSISTENCY STREAM

USER PRODUCTGOOD

UX

- Surprises

- Ease of Learning vs. Ease of Use

- Design Patterns and Best Practices

- UI segmentation

- UI Guidelines

Consistency is Your Friend!

Thank You! [email protected]

@yordanov @ux_progress