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.
