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-off after front-end validation

test different 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

<input type=“email” name=“email” />

<input type=“url” name=“url” />

<input type=“tel” name=“zipcode” />

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

auto-complete common fields

turn off auto-capitalize

when designing form fields on email, password & url

graceful degradation

• build for now and future

• don’t force yourself to build features for old browsers

• make it work and move on

auto-login from emails

be careful!

• people forward email

• don’t 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 they’re 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

don’t ever ask for the information that you don’t 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 doesn’t, customer support knows things design doesn’t, and so on.

• We’ll 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, you’ll use a structured critique and weighted voting to select the best ideas from the field of possibilities.

wednesday: decide• By Wednesday, you’ll have over a dozen solutions

to choose from. That’s great, but it’s also a problem, because you can’t prototype and test a dozen solutions. You’ll have to narrow down and make tough decisions.

• To prepare for Thursday, you’ll draw a storyboard, which serves as a blueprint of your forthcoming prototype. Meanwhile, it’s time to select research participants and get to work planning Friday’s interviews.

thursday: prototype• You’ll 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 Ocean’s Eleven, you’ll gather a team of experts, assign roles, and put your plan into motion. And just like in the movie (sorry, spoiler alert), you’ll get the job done and still have time to enjoy your evening.

friday: test• On Friday, you’ll 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, it’s a fantastic payoff. But it’s actually those epic failures which, while painful to watch, provide the greatest return on investment. When a prototype flops, it means we’ve spotted critical flaws after only five days of work. It’s 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