Is ‘Responsive Design’ Enough? Don’t Forget the ‘Context’

The number of consumers using smartphones and tablets to access websites, brands are increasing. This had led to reconsidering how to design user experience for various devices. Roughly one out of every four visits to leading e-commerce websites now comes from smartphones and tablets, representing a whopping 138% annual increase. And with reports of year-over-year PC sales declining for the first time in more than a decade2As companies now need to cater to various devices and their screen sizes, ‘Responsive Design’ is increasingly being used to have a single design catering to various screen sizes.

Advantages of Responsive Design:
It is a solution that allows your website to adapt to any screen size and orientation, providing a more consistent experience across devices. The user’s web browser changes how the page appears for a specific screen size. It is also on client side unlike previously designed pages for mobile, which were on server-side and would transcode web pages on the fly.
The biggest advantage of responsive design is the time and money factor in building a website. As a single design is used (while defining how layout should be changed, content hidden/shown according to device) it helps conserve design resources. Responsive design also makes it easier to develop and maintain than multiple style sheets for various device forms.
 As mobile websites increasingly become popular, compared to mobile apps (due to improvements on network speed on the mobile) responsive design has become an industry standard.

Does Responsive Design Create Optimal User Experience?
To a certain extent it does. It can show/hide content based on the device. It also lays out websites to be easy to read and navigate with a minimum of resizing, panning, and scrolling, making websites usable on devices.
However, it does not focus on the ‘Context’, which is the most important factor for defining the user experience. Usable websites do not always sell a product. Meeting the user’s needs and expectation helps sell a product. This is where we need to look beyond ‘responsive design’ and focus on the ‘context’.

Users use mobile sites in a ‘mobile’ context. While desktop sites are used with a fairly ‘specified’ context – focused user, comfortable surroundings, full sized keyboard etc. – mobile sites and apps are ‘mobile’, meaning they can be used anywhere - public space, home or office. This means users will have limited attention due to the various distractions from the surroundings. The connectivity in the surroundings and battery usage provide additional complexity.
With multiple devices in hand, users today use multiple devices to purchase a product. Hence, the same design, even though built responsively, may not work across channels. It is very important to understand user’s behavior for using various devices.

According to Google, majority of users use devices sequentially and not simultaneously. Which means, users research a product on mobile, but make a purchase on desktop (as it allows users to be more focused) and track it on tablet or mobile.
 Google has also categorized three types of user behavior on mobile - urgent now (request to find something specific fast, like the directions to an ATM or finding the roadside assistance number), repetitive now (user is someone checking for the same piece of information over and over again, like checking the same stock quotes or weather), and bored now (users who have time on their hands, while on trains or waiting in airports or sitting in cafes).

It is very important that before you design, you should understand the ‘context’ and ‘behavior’ on why and how your customer may use different channels. You can build a journey map (click here to learn how to do a journey map) to understand this. It may be required to have features, which are unique to different channels and not have a single design rendering ‘responsively’ to various devices.

Are ‘Responsive Design’ and ‘Context Driven Design’ Mutually Exclusive? 
Not necessarily. Both can be complimentary.
Before you decide on whether to have to have the same site across all devices or a separate site, it is important to identify the primary device the user will be accessing the application on. Eg: if 70% of users will use the application to check status on mobile, define all the features to aid the user to access it on mobile.
Next, focus on the context they will use on various devices. Eg: A user will mainly use a roadside assistance website to find the roadside assistance number while having a flat tire on mobile instead of signing up for a roadside assistance program. Hence, ensure that the number is displayed upfront instead of sign up button which is focused more on a desktop site. Again, responsive design can be used to hide/show or change the layout of display.

Read More

How to Design sized web content for Mobile web

Previous post highlighted some of the guidelines that will help, while designing for mobile web.
But if we specifically talk about iOS, then it has capability of displaying content designed for desktop. So same content can be used across devices.

iOS displays existing web content in two ways, it can display the web content on the screen resolution of the device or it can render the page at the actual size of the page and then "zoom out" to fit the page on the screen of the device. This virtual screen is called "Viewport"

What is Viewport?

It can be defined as the rectangular area ( screen) where the content is displayed.

Image below displays the "Desktop Viewport" and "Viewport on iOS"

















For most of the devices the screen resolution and the display size are equal to the viewport. This thing is applicable in case of desktop , laptops etc, but in the case of mobile it is different. Many pages on web, wont render well on all phones, at their screen resolution. In order to render all the pages well, mobile phone render pages on the virtual resolution and then scale them down to fit on the screen of the device.
For example: In iOS the device screen width is 320 pixels and the viewport size width can be 980 pixels, so in this case, the webpage with 980 px width, will fit perfect on the screen.


Viewport Meta Tags

Safari on iOS displays almost all the pages well, that are designed for desktop. If this doesnt work then you need to change the settings by configuring the viewport. Configuring the Viewport is easy, just add a line of HTML to your webpage. It is basically done through viewport meta tags. Typically viewport meta tag is used to set the width and initial scale of the viewport to improve the presentation of the webpage. For example : if the width of your webpage is less than 980 px, then you should set the width of the viewport to match the width of your webpage.

"Viewport meta tags are basically used to configure the width and the scale of the viewport"

If your webpage is narrower than the default width, then set the width of your viewport to the width of the webpage, as displayed in the image below:





















Viewport settings for Web Applications

If you are designing web application specifically for iOS, then the recommended size of your webpage should be the size of the iOS. Apple recommends that set the width as “device-width” so that the scale is 1.0 in the portrait orientation and it doesn't change when the device is in landscape orientation.














Configuring the viewport helps resizing the web content for the device. But it will not be able to give a good user experience every time, because in some cases text will not be readable, user has to zoom in, zoom out , scroll a lot, in order to read the content, reach the targeted link etc.

Read More

Content Design guidelines for Mobile web

While creating a website the first thing that a designer decides is the appropriate dimensions for it . But when it comes to mobile, the resolution and dimensions are not fixed. They are changing very rapidly, also the lifespan of mobile devices are much shorter. The constant release of new mobile devices also adds to mobile device resolutions. So this wide variety of resolution, makes it difficult for designer to select an appropriate dimension to work on.
























Figure1: This is a very limited list and not complete. It is just to give an idea about the resolutions.

To answer this problem, we need to create layouts for specific collection of devices. These layouts changes depending upon the resolution and orientation of a device, in order to enhance the experience on mobile.The main reason of this mobile resolution specific experience is the “one web” approach to the web design.

…One Web means making, as far as is reasonable, the same information and services
available to users irrespective of the device they are using. However, it does not mean
that exactly the same information is available in exactly the same representation across
all devices. The context of mobile use, device capability variations, bandwidth issues, and
mobile network capabilities all affect the representation. Furthermore, some services and
information are more suitable for and targeted at particular user contexts…

Guidelines for Designing for Mobile web

Many of these guidelines will improve the reliability, performance, look and user experience of your webpage, on all mobile platforms.

Simple
Users on mobile, quickly want to get the desired information. So mobile site should be simple than the standard site. Standard site is already simple, simplify it further more, to optimize it for mobile. This may include re doing the menus, removing images, breaking texts at certain places etc. You need to simplify the site from design and functionality perspective. Make sure that everything presented on the site should be simple, readable and useful.

Example





















Lightweight
Use lightweight graphics for mobile site. Even it is good to use a simple, separate mobile theme for mobile site. Mobile theme means you can actually consider how user are using your site and then optimize it for mobile accordingly.

Example





















Use Columns and Blocks
Use columns and blocks to layout your webpage like many online newspapers. If the content on a webpage, cover the full width with content, then it generally becomes difficult to read. Columns and blocks breaks the webpage into parts, thus making it easier to read and also allows user to double tap on objects on page.

Example





















Limit Page Length
Include as much content from your actual site as practically possible. But include that too a limit. Don't make the user to scroll too long , to view the complete page. In a touchscreen phone its still easier to view a longer page, but also think about a user with a keypad based phone. Break the content into parts, use pagination etc to avoid long scrolling.


Don't use pop ups or open new window
Do not use pop ups or open new windows, while browsing a website on mobile. As it can infer between the browsing experience.


Don't rely on flash or java script
Not all phones support flash or java script. And if some of the phones support, then it is not sure that its the latest version. Make sure that content on your mobile site is plain HTML/CSS, otherwise large content of your site will be on risk, if users will not be able to access it.


Limit scrolling to one direction
It is really annoying when user has to scroll in multiple directions, while browsing through a site. And this become worse, if user has to browse that over a mobile phone. Limit your browsing to one direction (vertical) to give a better experience to the user.

Example





















Link to the Standard site
Whatever platform users might be using, they might want to see the standard site, as nowadays many smartphones, i phones are capable of presenting the desktop site as it is. Always give a link to the main site, it can be link it the footer. It should also allow the user to go back to the mobile version from the main site without using back button.

Example





















Size and Sequence
Plan the proper sequence of the content on your site, depending upon the importance of the content, buttons, navigation links etc. Interface should also be designed keeping in mind the touchscreen interface, where buttons, click able links should be bigger.

Example





















References: noupe.com , UX booth, cyberdesigz.com

Read More

Content Publishers Going ‘Tabletized’

Newspapers were the first to realize the power of the Web to communicate instantly with their readers. Now being mobile-enabled has become increasingly important for them to stay relevant today. And as if it wasn’t enough of a problem to choose the right platform (Android, iOS), device capability, or to choose between mobile Web and native application, things have become more complicated with penetration of tablet devices (though there's no competition to iPad yet).

Tablet devices will become the biggest point of influence as to how users will interact and consume digital content. Companies such as BBC, FLUD, Wired, and many more already have their iPad native application available on Apple 'sApp store. CNN, Reuters, ESPN, SPIN.com, and NYTimes.com have made themselves aligned to iPad Web browsing experience.

However, the strategic choices will become easier for digital content publishers if they try to understand how different stakeholders of the publishing industry will deal with content in future.

Native Experience of Information

The first advantage of creating a native application for iPad is the richness of experience the app provides. Designers seem to be designing apps more as amalgamations of games and info-graphic interfaces and less as task-driven interfaces. Native applications can make good use of device capabilities such as camera, accelerometer, gyroscope, voice and motion sensor, and GPS and add to the overall experience of the application which is difficult to achieve on browser-based app designs. While some amount of offline browsing and location aware services are possible using HTML 5, it is still not possible to access some of the native capabilities of mobile devices from browsers due to security and privacy concerns (for example, access to address book or calendar).



The Wired iPad app is a beautiful example of static magazine content being made available in a highly interactive and multimedia-based content delivery format, without compromising on the magazine’s original free flow content designs, large visuals, large advertisements, and silky smooth page flip transitions. However, in many ways the content is confusing and unusable because of non-obvious controls, unintuitive interactions, and game design thinking. Read NN Group report on usability of iPad apps and websites.

Hybrid Experience of Information
Publications need to think — Does reading infotainment content always require such rich multimedia experiences? What about serious content readers who would want to read articles for hours? Does it make more sense to have subtle and clean reading experience for them?

Financial Times has designed a hybrid version of Web and native applications for their website (app.ft.com), optimized for an iPad. The website exploits HTML5 capabilities to load content in the background and provides a newspaper's page-after-page flip reading experience that is completely browser based. Users can easily differentiate the content reading experience from traditional Web content rendering without compromising the subtle simplicity.



Richness of Content is Expensive
Rich content comes with its weight and each bite of space on the iPad is expensive. Single copy of Wired magazine consumes half a gigabyte of storage space on the iPad before one can use it. Data on mobile is still expensive; downloading a copy of Wired using the 3G iPad connectivity would easily cost a fortune in many countries along with the time that it would take. And all of it will impact the end user experience.
Natural Digital Content Interactions Are Missing
In many ways native applications' designs reduce the user’s natural tendency of reading and interacting with the digital content. Features and controls that users use in browsers are not available (for example, copy text and photos and share it with friends by pasting it in an email). Features like bookmarking and printing pages are not available unless they are built seamlessly within the application.

Access and Reach
Digital content is highly search driven. To access a certain publication's content, users may use any of the search engines or they may find it via links from other websites, blogs, Twitter, and/or links embedded in emails. However, the mobile native apps currently do not support such navigation. So, if a publisher's marketing strategy is to increase the number of visitors and not bother about the repeat visitors, it makes sense to go for mobile optimized Web, especially if it is viral.

Media Advertising Means Money!
Advertising has been a primary source of revenue for most media companies across platforms. For a decade, it was believed that ‘Web users are ad blind’ and they don’t care about ads. At the same time, there has been a significant growth in various media companies' advertising budgets year after year. It’s time media content producers rethink about advertising.
Designers and marketers of traditional Web have worked on aspects like ad slots, positions, sizes, context, level of interactivity, personalization, and more but now iPad can potentially sail them far ahead in time. Ads designed for Wired app are more persuasive by being highly interactive. Perhaps there is scope to make them more meaningful, information exchangeable, intelligent and personalized by adding context sensitiveness. Advertising of such kind will certainly provide better branding mileage to advertisers and also the opportunity to get richer data in bargain. It might just be advertisers who will push publishers to go ‘tabletized’.

Editorial Control: Rigid vs Flexible vs Time to Publish
For publications that are in the business of providing real-time digital content, it is important to package content and keep updating it (for example, coverage of elections or scams). It becomes utmost important for the editorial staff to have flexibility and control over the content and presentation. Native application takes away that flexibility and control because of rigid content meta data structures and templates. Due to cumbersome maintenance and update routines in native applications and app stores, any change made to the app design can take weeks to happen. The work includes programming, testing, approval process, and then finally the end users have to actively choose to update the app. Mobile Web apps, however, require limited programming and testing, hence always providing users with the latest content and experience.

Read More

Content is King

"People don’t read, especially when it comes to web and mobile" - I said that!

 

 

Content is important:

• Content adds value
• Content is part of user experience

And it is becoming increasingly important with the 'Mobile First' design philosophy coming into power. But, much of the mobile first design philosophy fails due to one big reason: CONTENT

And CONTENT failure is not a new phenomenon; it is to be seen even in web specific designs. If, we go to the root of the problem, then it is the different user behavior on web and mobile.

Keeping this in mind here are some guidelines to create content. These are applicable not just for Mobile but for web as well: 

1. If first 160 characters do not sound meaningful, rest of content cannot be useful!

With reducing attention spans, one needs to impress the audience with the first 160 characters. If an idea can’t be put in short, there will be no one listening to it. And if there is no one listening then an idea is useless. So, it makes more sense to put in all the skills to make that 160 character impressive!

2. If everything is useful, then everything is useless

Yes! There has been no mistake in the above statement. If one thinks that everything is useful for a site’s target audience, then surely there has been a mistake. Usually, we tend to fill in so much content, that everything seems to be useless and a person tends to drift away.

3. Use scan-able keywords

Every user opens a site with something in mind. If that is not scanable or searchable then it is highly unlikely that the user will stay for more.

4. Start with conclusions and recommendations

Inverted pyramid style of writing is the key for every content on web and mobile. People want to know quickly about everything; no one has time to read on and on….

5. Attention grabbing headings, meaningful subheadings

Headings are to get attention and subheadings are to make use of that attention span. Keeping a subheading simple, without jargons and to the point helps to gain trust as well. Jargons, complex terms, clever lines are meant to be for the Main heading, keep them out of the rest!

6. A picture is worth 1000 words, but we don’t want 1000 words!! Do we??

The intention is to keep it simple, neat and easy to download. A picture may seem to be the best option to give a visual appeal and represent an idea, but it increases the size. And with download speeds varying unpredictably, sometimes, pictures are a blot to user experience.

Read More

How to use QR Codes, or rather, how not to use QR codes!

A count of Smartphone users, counting only US users, at the end of February 2011, gave an astonishing figure of 69.5 million! This number is definitely going to rise exponentially and the proof is visible everywhere around us. We find at least a couple of Smartphone users in our circles and others who don’t own one, always eye the new Smartphones from the corner of their eyes.

And along with Smartphone came in smarter things like QR codes. A QR Code is a 2 dimensional matrix code created by Japanese corporation Denso-Wave in 1994. The "QR" is derived from "Quick Response". The creator’s intention was to create a code whose contents could be read at high speeds.

QR code is in the limelight and there are no ways about it. In a horde to use this somehow or the other companies are breaking their head, day and night. QR codes are seen everywhere from an outdoor hoarding to a magazine cover. An example of how the importance of QR codes is growing:

“Along with HTML5, QR codes will become a far more important part of the travel experience.  These barcodes may soon be providing TV channel listings in hotels, in flight entertainment instructions on airplanes and itineraries on cruise ships.” -Ayan Banerjee, Senior Consultant, MindTree Ltd. Read the full article!

The tool is simple to use. Point the camera towards the QR code, and an in-built app will de-code the QR code to some data. This simplicity may have a lot of potential and appeal with the growing Smartphone user segment, but as long as it is not in the face of a user.

Here are some of the direct uses of a QR code:

·         To initiate a browser session – This is the most abused one!

·         To display text

·         To initiate Email Transaction – An email can be initiated and even the message body can be populated

·         To initiate SMS transaction

·         To initiate Audio/Video Streaming

A prevalent use by marketing companies is to replace the sexy looking advertisement with an ugly looking black-and-white QR code. QR codes are supposed to enhance the Mobile Experience of a user. But, this should not be at the expense of ruining the physical appearances and experiences.

Let’s see what happened when some marketers used QR codes in this fashion. Most of the users who still don’t have Smartphone, struggled to understand what it was about. Smartphone users who didn’t know about QR codes struggled to understand how to use it. Smartphone users who had enough of it, passed on! Effectively the marketer lost on the customers, who looked at that advertisement, and could have read on about it but moved on, since it was either not understandable or too boring! What we also observe is that most of the marketers end up using the QR code as an alternative for people to click links. Therefore, it is not surprising when people perceive QR codes as just a link to the main advertising page of a company!

Is this what the advertisers/marketers were looking for? I believe not!

Some golden rules to keep in mind when devising campaigns using QR codes:

• Everyone does not have a Smartphone
• Every Smartphone user does not know how to use a QR code
• Smartphone user who knows about QR code may be fed up of seeing them everywhere

Another key lesson for any marketer will be, to realize that QR code is not an alternative to a link. This has been over used and abused in all senses. It’s time that we think beyond this. Innovative use of these codes is the need of the hour!

Read More