supercharge your application with the best ux practices

Download Supercharge your application with the best UX practices

Post on 15-Jul-2015

2.917 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

  • supercharge your application with

    the best ux practices

    Gercek Karakus Istanbul, April 2015

    SWE530 - Software Design Process Bogazici University

  • front-end engineers?

    back-end engineers?

    ios/android engineers?

    engineering managers?

  • ux design

    the process of enhancing customer satisfaction and loyalty by improving the ease of use and pleasure provided in the interaction between the customer and the product.

  • everything on the web is a form

  • validate to bring user on your side

  • meaningful error messages

  • huge drop-o after front-end validation

  • test dierent validation messages

  • do your homework first

  • validating phone numbers

    remove non-digit characters and reformat in the backend

  • validating email fields capture common mistakes in email fields

    ie. gnail.com, yhoo.com

  • Use HTML5 input types to trigger appropriate keyboard on mobile devices

  • On Android, both number and tel brings up the number pad keyboard

  • auto-complete common fields

  • turn o auto-capitalize

    when designing form fields on email, password & url

  • graceful degradation

    build for now and future

    dont force yourself to build features for old browsers

    make it work and move on

  • auto-login from emails

  • be careful!

    people forward email

    dont let free riders in

    implement sandbox mode & limit user access

  • in-place editing

  • responsive web design

  • adaptability matters

    cross browser

    cross device

    easier maintenance

  • flexible images

  • http://www.slideshare.net/AaronGustafson/intro-to-adaptive-web-design-chadev-lunch

    fluid grids everywhere

  • mobile first breakpoints

  • readability matters

  • characters per line 60-75 characters/line on larger screens

    35-40 characters/line on mobile

  • responsive typography

    http://ia.net/blog/responsive-typography-the-basics/

  • http://typecast.com/blog/a-more-modern-scale-for-web-typography

    adapt line-height and font-size

  • no more image icons!

  • life is happier with font icons

  • crisp & clear iconography

    single http request

    easy maintenance

    vector-based (rescale, recolor or animate with no hassle)

    font icons

  • perceived performance

    vs

    actual performance

  • build single page web apps

  • make it feel fast

    pre-catch views on the front-end

    cache in memory for fast access

    separate content and chrome

  • http://www.mobify.com/blog/beginners-guide-to-perceived-performance/

    add touch states to your buttons

  • enable momentum scrolling

  • avoid spinners when possible

    animate on waits shorter than 300ms

    display chrome instead of a spinner

    use short animations to distract the user from the wait instead of staring at a spinner theyre simply waiting for a short animation to finish.

  • https://medium.com/ui-ux-articles/3d1b0a9b810e

    Improve the experience with animations

  • Improve the experience with animations

  • smooth animations

    60fps

    bust janky animations with devtools

    pre-load views

    contextual transitions

    http://jankfree.org/

  • Performing Actions Optimistically

    http://www.lukew.com/ff/entry.asp?1759

  • respond to user interaction in

    less than 100 ms

  • if it absolutely has to take longer than 100ms,it should definitely respond within 1s.

  • should make you feel bad

    anything that takes longer than 1 second

  • Take Advantage of Natural Gestures

    Side-to-Side Swiping (Photo Galleries)

    Pull-to-Refresh

    Long Press

    Pinch-Zoom

  • increasing conversion

  • auto-fill whenever possible

    One of the worst things from an experience and conversion stand point is to ask people for data that they have already provided in the past,

    repeatedly over and over again.

  • suggest continuity

  • dont ever ask for the information that you dont really need

  • building the billion dollar landing page$

  • focusing on conversion

    first impression ~3 seconds attention span

    responsiveneeds to adapt all devices

    high performancesmall footprint and fast loading time

  • width

    height

    pixel density

    adapt to viewport

  • all the roads should lead users to the same goal

  • design validation

  • build funnels

  • identify drop-offs

  • https://mixpanel.com/report/402623/funnels/#view/668567/from_date:-127,to_date:-67

  • iterate your design

  • rinse & repeat

  • always track form interactions

    formInit

    formSubmit

    formSuccess

    formError

  • case study: a/b testingHypothesis When users click on images or links in the content section, we were displaying the modal with the contact form. We thought we can personalize each modal depending on how users triggered the modal and display related information to them in order to build more trust. https://docs.google.com/a/redbeacon.com/document/d/1Ab6fvHlPfhhpoOggqGVAceyyL_SlOJOVO6qDqUr7C8o/edit#heading=h.r64h2lswjsr8

  • the design sprint

  • five simple steps Ideation

    Sketching

    Deciding

    Prototyping

    User Testing

  • monday: unpack On the first day of the sprint, your team will

    unpack everything they know. Expertise and knowledge on most teams is asymmetrical: Sales knows things engineering doesnt, customer support knows things design doesnt, and so on.

    Well explain how to draw insights from the team together, create a simple user story, set the scope for the week, and take useful notes as a team.

  • tuesday: sketch During Sketch day, your team will work individually to

    draw detailed solutions on paper. As you sketch, everyone works separately to ensure maximum detail and depth with minimum groupthink.

    By breaking it down into four discrete steps (Notes, Mind Map, Crazy 8s, and Storyboard), we show you how CEOs, engineers, and sales folk alike can contribute their ideas effectively.

    After sketching, youll use a structured critique and weighted voting to select the best ideas from the field of possibilities.

  • wednesday: decide By Wednesday, youll have over a dozen solutions

    to choose from. Thats great, but its also a problem, because you cant prototype and test a dozen solutions. Youll have to narrow down and make tough decisions.

    To prepare for Thursday, youll draw a storyboard, which serves as a blueprint of your forthcoming prototype. Meanwhile, its time to select research participants and get to work planning Fridays interviews.

  • thursday: prototype Youll spend Thursday in the flow, being ridiculously

    productive. We show you our systematic plan for doing the impossible: build an entire realistic-looking prototype in just eight hours.

    Like George Clooney in Oceans Eleven, youll gather a team of experts, assign roles, and put your plan into motion. And just like in the movie (sorry, spoiler alert), youll get the job done and still have time to enjoy your evening.

  • friday: test On Friday, youll show your prototype to real customers in

    1-on-1 interviews. We show you how to make sense of what you observe, taking notes as a team and finding patterns in real time. By the end of the day, your ideas have all been exposed to oxygen some will be smash hits, while others will meet an early end.

    Obviously, when a risky idea succeeds, its a fantastic payoff. But its actually those epic failures which, while painful to watch, provide the greatest return on investment. When a prototype flops, it means weve spotted critical flaws after only five days of work. Its learning the hard way without the hard way.

  • build for future!

  • `http://www.slideshare.net/jamesgpearce/html5-and-the-dawn-of-rich-mobile-web-applications-pt-1

  • Help people. Build solutions. Work passionately. Change an industry.

  • thank you!

    follow me on twitter: @gercheq gercekk@gmail.com