UI Consistency vs UX

Download UI Consistency vs UX

Post on 15-Jul-2015

358 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

  • UI Consistency vs. UXBulgaria Web Summit201518 April 2015

  • Vasil YordanovSenior UX Designer at Telerik, A Progress Company

    @yordanov

  • User Interface Consistency vs.

    User Experience

  • Yes, Im 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

  • Its 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 Consistency

    Real-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! vasil.yordanov@telerik.com

    @yordanov

    @ux_progress