Web Design

Adaptive Web Design: The User’s Eye View – Making It Easy On All Devices

Views

devices-website-designAdaptive web design allows web applications to be displayed on all sorts of devices, from tablets to smart phones to wearable items.  However, from the perspective of the user, mere display is not everything.  Users don’t care what the code is. Especially if they are not immersed in world of high tech, what they want is to get things done, to find things out, and, oh, by the way, possibly buy your product or service..  Your challenge is to make this possible for users of all varieties, wherever they access your webpage, or application.  This writer cannot even figure out the acronyms involved in creating the code for such products.  However, this writer knows what the end result should be.  These are some suggestions for thinking about how to make a web page comfortable for use by everyone, not just intensely tech-savvy folks. The rest of the population, despite their grievous technological deficits, are nonetheless potential customers.

How long does your web app take to load – and why?

The old saying is that a picture is worth a thousand words.  However, one of the most irritating features of many websites is that they take a long time to load.  This is often related at least in part to the amount of graphics included in the site.  Although graphics are exciting and fun to create, to pick out, to view and to admire, during the design process, they are sometimes less than useful in the web app itself.  Unless you are demonstrating how to repair something, a graphic is frequently of less help than an informative piece of text.

Yes, they are often inserted for marketing.  Yes, they are supposed to draw the eye.  Yes, they are intended to send messages subliminally regarding the product, or service.

However, they also make the app more cumbersome.  A webpage that takes an extra 30 seconds to load may simply seem too inconvenient to access often.

Furthermore, the impact of an image or a video is very different when you are viewing it on a three-inch screen.  If you feel you must absolutely use a graphic, be sure that it will “read” at the smaller size.  Best of all, find other ways to make your web design compelling and appealing.

How much of a user’s data plan does your web app consume?

Web users these days are often wandering far from a physical connection to a phone.  They are also often nowhere near a Wi-Fi signal.  More and more people are carrying their hotspots with them.  They may be using a separate piece of hotspot equipment, or they may be using their smart phone to pull in a signal.  In either case, they are likely to be paying for every click.

This makes a big difference.  Web designers need to be considerate of the data budget of their users.  For someone who does not routinely think in terms of kilobytes, it can be a rude awakening to get a message that they have exceeded their monthly allotment.  Going through the listing of where the data was allocated, which is available with some provider plans is eye opening for the uninitiated.  When every click shows up, websites that seemed attractive initially begin to seem excessively expensive to access.

One of the ways that users are compelled to use up their data plan is by being launched onto another page from hovering over a word or icon. This is irritating as well, as particularly inconvenient when the user has to backtrack to the page they wanted.

Think, therefore, of how many clicks you will demand of your users.  What will it take for them to accomplish what they need to accomplish?  Can you fit enough info on one page to allow the user to get the major info with just one or two clicks?  They will thank you for that, and will be more likely to return to use your web app or page again in the future.

How does your web app look when blown up?

However, fitting a great deal of information on one page presents challenges of its own.  If your user does not have perfect vision, they may have to consider enlarging some of your text.  This is where matters get complex.  A layout may look nice when it is sized for the device screen.  What happens, however, when the user zooms in? Is it still clear where things are on the page?  Can users orient themselves instantly once they zoom out again?  Making sure that different parts of the page are clearly demarcated by markers such as color, font, and location, will help the user to find their way as they enlarge various portions of the page.
What are users doing next on your web app?

If possible, find a technology newbie, or novice to try out your webpage for you, or a golden ager who is seeing this for the first time.  These folks will be better able to spot ways that your page works and does not work.

For example, imagine that your user wants to contact you.  Is your contact info tab hidden down at the bottom?  Once the user finds it and opens the Contact Us page, how do they go about finding a phone number?  Remember, if they are on a handheld device, they have access to a phone.  It is frustrating to look for a phone number and instead be presented with a form to fill out.

If you must present users with a form, be merciful with them.  Filling out forms online is maddening enough when the screen is large.  On a tiny screen it is murder, especially when a carefully crafted message evaporates and disappears with one misplaced keystroke..  Consider asking for the user’s phone number all in one string of digits rather than forcing the user to enter their number in three separate boxes. Remember, every time the user moves on to the next little tiny box, they may have to re-invoke the number pad instead of the QWERTY keyboard.  This is slow, and tedious.  If you can find ways to make this less onerous, your users will thank you.   Considerate adaptive web design choices like this save your users’ time and energy and reduce the possibility of mistakes on the much more uncertain onscreen keyboard of a handheld device.  Considering that Windows 8 can include a touch screen, this issue will be applicable to an increasing number of users.

Perhaps the user wants to take an action, such as making a purchase.  Being able to conveniently see what is in their checkout ‘cart’ all on one screen is very helpful.  This feature is, surprisingly, missing from some big name webpages!

Adaptive web design is supposed to make the experience of your web page or app a pleasure on every device.  Taking the point of view of the non-techie user can help ensure that this is the case.

About The Author

Suren · A perfect enthusiast PRO-Blogger on TechMagz site and writing professional tech blogging contents! Have a good exposure on technology news, the latest release of gadgets, experienced WordPress designer and lovely DAD for two adorable children.