The 5 elements to create the perfect mobile user experience
Dated Sunday September 1, 2013
Tags: gebruiksvriendelijkheid, marketing, ux
The user experience of your mobile website is an essential component of engaging your visitors or customers. 5 important factors that create a good user experience:
Elegant use and feel
The manner in which the visitor can interact and navigate your mobile website or webapp is an essential component of the user experience. Often you see the design and navigation is build from a technical point of view. Signs of a technical user interface:
- To many buttons
- Long and complicated wizards
- Long forms
- To many options
- Cold and minimal look
When developing a mobile website, try to have the user in mind? How would it be fun to use? What would be the simplest way of accomplishing the task? Hide all non-essential parts behind a advanced button. Work with colors and images to create a more pleasent look.
Addictive
A great design is addictive to work with. Found yourself ever clicking around a website even after you had found the content you where looking for? That is a tell tale that the design of the website is addictive. This addiction is very hard to achive, but in fact the holy greal of user experience. Try to analyze why you staid so long on this website and learn from it. Because, unfortunately, there is no recipe for achieving this.
Fast
Where getting used to instant results for every online action we take. Computers, tablets and internet connections are getting faster every year. Having to wait for a reaction when clicked on a button or link becomes a nuisance. To give your mobile website or webapp the fastest feel:
- Make the mobile website or webapp as fast as possible
- Show feedback when a fast reaction isn't possible. A hourglass will do.
- Explain why certain actions take longer to perform: "we are now collecting data from our partners ...".
Consistent
One of the major problems seen in open source projects. Because every plugin is build by someone else, every plugin navigates and functions slightly different. Signs:
- Buttons have a different look or placed on a different part of the site
- The order of steps has changed
- Terminology has changed
- Default action behave different. I.e. on plugin simply deletes while another asks "are you sure?".
Consistency is esssntial when the mobile website or webapp focusses on returning visitors. Having to learn every page or tool on itself is a major turnoff. Make sure the user has to learn a general manner in which the website works on which they can fall back for every page.
Adjust to common practices
You want to be unique. You want to be different. But when it comes to the interaction design, don't be! Visitors like to do things the same way they always do. So don't put your menu on the bottom of your page or put the submit button above your forms. Have the search function on the top right position. Learn from the major websites. Better a good copy then a bad design!
{"jsfiles":["\/cms\/BB\/JSDivers\/jquery.flippy.js","\/cms\/BB\/JSDivers\/switchtomobile.js","\/cms\/BB\/JSDivers\/iScroll\/iscroll-lite.js","\/cms\/BB\/Form\/Fields\/CpFormDate.js","\/cms\/BB\/JSDivers\/touch2.js","\/cms\/BB\/Ajax\/simpleajax.js","\/cms\/BB\/JSDivers\/webcoding.js","\/cms\/BB\/JSDivers\/check.js","\/cms\/BB\/JSDivers\/loadparts.js","\/cms\/BB\/JSDivers\/cms-actions.js"],"cssfiles":["\/cms\/BB\/CSS\/touch\/website.css","\/cms\/BB\/CSS\/touch\/mobile.css","\/css\/mobile.css","\/cms\/BB\/CSS\/buttons.css","\/cms\/BB\/CSS\/touch\/general.css","\/cms\/BB\/CSS\/touch\/cms.css","\/cms\/BB\/Form\/Fields\/CpFormDate.css","\/cms\/CBB\/Modules\/CRM\/CmsModuleImportMail.css","\/cms\/CBB\/Modules\/Standard\/CmsModuleManuals.css"],"javascriptlines":["\nvar created_keepSessionAlive = false;\nif (typeof keepSessionAlive !== \u0022function\u0022) {\ncreated_keepSessionAlive = true;\nkeepSessionAlive = function() {\njQuery.post(\u0022\/keep-session-alive\u0022);\nwindow.setTimeout(\u0022keepSessionAlive()\u0022, 300000);\n}\n}\nif(created_keepSessionAlive){\nwindow.setTimeout(\u0022keepSessionAlive()\u0022, 300000);\n}","CPJS.vLoadPluginOn(\u0027cpform\u0027, {})","CPJS.bWhenReady([\u0022touch\u0022], function() { Touch.sBrowserType = \u0027Android\u0027; } )","CPJS.bWhenReady([\u0022touch\u0022], function() { Touch.fBrowserVersion = \u00277.0\u0027; } )","CPJS.bWhenReady([\u0022logdisplay\u0022,\u0022rpc\u0022,\u0022touchsite\u0022,\u0022stacking\u0022,\u0022showwaiting\u0022,\u0022storage\u0022,\u0022googleAnalytics\u0022,\u0022popups\u0022], function() { CPJS.touchsite.vInit(false) } )","var CmsStatic_iNewItemPage = 33426;","var sTabletMenuColor1 = \u0027#5990B3\u0027;","var sTabletMenuColor2 = \u0027#2786C2\u0027;","var aDictionary = new Array();","aDictionary[\u0027postponeTo\u0027] = \u0027verplaats naar\u0027;","aDictionary[\u0027tomorrow\u0027] = \u0027morgen\u0027;","aDictionary[\u0027dayAfterTomorrow\u0027] = \u0027overmorgen\u0027;","aDictionary[\u0027nextWeek\u0027] = \u0027volgende week\u0027;","CPJS.bWhenReady([\u0022stacking\u0022], function() {\nCPJS.stacking.iToolbarWidth = \u0022100%\u0022;\nCPJS.stacking.iSlideLefMargin = 0;\n} )",""]}