Creating distinct user interface designs.

There are many factors that affect the usability of a certain web page while using a specific device. Primarily, there are the three layers of user experience, as identified on UXmatters.com:

1.  Hardware
2. OS
3. Mobile Website/App design.

It is therefore the goal of the designer to utilize the best features of each layer in the most effective combination.

Instagram app on Android

Instagram App on iPhone

Maintaining visual continuity.

Despite the aforementioned distinctions in design, each “version” of the mobile site has to convey the same key familiar visual cues. This goes beyond the logo and color scheme – ideally, the  interactive elements should also have a consistent appearance.

This mobile site, developed by Tidal, will keep the core functionality a user would be looking for on their mobile device

Maintaining feature continuity.

With smaller devices come certain limitations on what functionality can be kept, from a full site. Thus, it is crucial to identify the key reasons why a user would visit the site or run the app – these features are a must, others may be partially taken out.

Maintaining data continuity.

If a website handles user accounts and stores users’ data – it is natural to provide access to that data on all devices. This data becomes personal – a Facebook profile is a familiar “place”, and when a user is accessing it through an app, they expect it to be the same “place” as it is on the full website, without any “syncing”.

Maintaining Content Continuity

Along with the look and feel of the product, the readable content also needs to be kept consistent. Of course the amount of text that can be efficiently displayed and read varies on different devices. The style and the tone of it, however, must be uniform across those devices.

“A dedicated mobile site is a must, and apps get even higher usability scores…Now is the time to redesign.”
Jakob Nielson, The Usability Researcher
September 2011

Consider this important finding from Jakob Neilsen’s latest mobile usability study:

• Mobile site success rate: 64%
• Full site success rate: 58%

*Success rate is a measure of the proportions of users able to complete assigned tasks on their mobile devices in the study.

This leads to the first important guideline for improving the mobile website user experience.

1. DESIGN A SEPARATE MOBILE SITE

If you are expecting your visitors to access the same site from both desktop and mobile browsers, you might as well be asking them to fit a square peg into a round hole. It just doesn’t work.

2. PRESENT A CLEAR LINK FROM THE FULL SITE TO THE MOBILE SITE

Make it easy for the user to self correct. Unfortunately, search engines often direct mobile users to the full sites – even for businesses that offer mobile websites with much better user experience.

3. BUILD A MOBILE APP (If Doable)

Mobile applications have a measured success rate of 76% as opposed to 64% for mobile websites. If your product or service is suited for a mobile application and can justify the expense of developing a mobile application, then building a mobile application is a good choice.

4. AVOID SWIPE AMBIGUITY

Consider the difference between mouse-driven desktop design and gesture driven touchscreen design. Desktop website design generally avoids horizontal scrolling, but for touchscreens, horizontal swipes are common place (ex. scrolling through a carousel). This gesture is less discoverable for new users than most other ways of manipulating mobile content, so it is recommended that a visial cue is presented.

5. LIMIT THE NUMBER OF FEATURES

Avoid what has come to be known as the “fat-finger syndrome”. A successful mobile website or application is designed for small screens. Sadly, some websites still expect their users to hit tiny areas that are smaller than their fingers. To make the most out of small screen size, limit the number of features on your mobile website to those that matter the most for the mobile user.

Mobile Website Design for Silverstar Ski Resorts by Tidal

1. Focus your mobile content

It is important to keep content on mobile websites to a minimum in a concise, yet informative style. This will ensure that more of your content will be read and be useful to the reader on-the-go.

• Break large blocks of text into smaller paragraphs or lists: users accessing mobile websites don’t view content the same way as users accessing from a desktop do, so give their eyes a break and communicate the information more effectively.
• Keep graphics, videos and animations to a bare minimum: these elements can increase load time drastically

2. Make mobile navigation easy

On the small screens of today’s mobile devices, it can be difficult to distinguish links from content or buttons from background.

• Be ‘thumb friendly’ and ‘click-able’: keep the touch screen in mind when designing buttons
• Provide feedback: when an button is clicked, something about the button should change to indicate that it has been selected

3. Give the user some space

White space, that is. Don’t be afraid of giving up mobile screen real estate. Define your focal points with white space.

• Organize content: crowded, jumbled content is unappealing to mobile users. Use colour contrast, boarders, fonts and lists to give the layout a spacious and orderly feel
• Use a single column layout: reduce the amount of vertical and horizontal scrolling the user has to do to view the content of your page.
• Design for mobile: mobile devices have different capabilities than desktops. Design your site to utilize the functions of the mobile devices: where applicable, give users the opportunity to share photos or call with the tap of a finger.

Mobile Websites and Apps: What’s the Difference? 

Mobile apps are applications that are downloaded and installed on a mobile device, rather than being accessed through an Internet browser. Users visit device-specific portals, such as Apple’s App Store, Android Market or Blackberry App World to find and download apps for a given operating system.

A mobile website is basically a simplified version of the main website that is accessed via the Internet. To learn more about mobile websites, please read Mobile Website Development Best Practices by Malyna Senger. Below is an example of the CNN standard and mobile website pages.

In general, a mobile website should be considered your first step in creating a mobile online presence. Apps are useful for creating applications for a specific use that cannot be accomplished using a web browser.

Advantages and Disadvantages of Mobile Websites and Apps:

1. Availability and compatibility: Mobile websites are available to users across a variety of devices via Internet browser. Users must access app stores specific to their operating system in order to download and install apps prior to being able to access the content.
2. Ability to update: Changes to mobile websites are visible to all users as soon as content managers publish them. Updates for apps must be first approved by the market (app store administrators) and then downloaded by the users before changes are accessible.
3. Accessibility: Mobile websites can be accessed through search engine results or industry-specific directories. For the most part, apps are only accessible through app stores. Mobile websites require users to have Internet connection, while some apps can work in offline mode.
4. Reach: Mobile website URLs can easily be shared by users via a link. Apps cannot be shared in this way, but as they are purchased through the phone manufacturer’s app store, they are easily visible to consumers.
5. Cost: Mobile websites are cost effective, as its ‘one-site-fits-all.’ App may need to be developed to be available for a number of different operating systems, which can greatly increase costs.