supercharge your application with the best ux practices
Post on 15-Jul-2015
Embed Size (px)
supercharge your application with
the best ux practices
Gercek Karakus Istanbul, April 2015
SWE530 - Software Design Process Bogazici University
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
build for now and future
dont force yourself to build features for old browsers
make it work and move on
auto-login from emails
people forward email
dont let free riders in
implement sandbox mode & limit user access
responsive web design
fluid grids everywhere
mobile first breakpoints
characters per line 60-75 characters/line on larger screens
35-40 characters/line on mobile
adapt line-height and font-size
no more image icons!
life is happier with font icons
crisp & clear iconography
single http request
vector-based (rescale, recolor or animate with no hassle)
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
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.
Improve the experience with animations
Improve the experience with animations
bust janky animations with devtools
Performing Actions Optimistically
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)
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.
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
adapt to viewport
all the roads should lead users to the same goal
iterate your design
rinse & repeat
always track form interactions
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
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!
Help people. Build solutions. Work passionately. Change an industry.
follow me on twitter: @gercheq firstname.lastname@example.org