The challenges of designing for multi-screen……

0 Responses

Where do I start?

For many, creating for a multi-screen experience is no longer an after-thought. The expression “mobile first” is increasingly becoming something we are discussing and contemplating as we begin the journey of a project. More and more, people are thinking not only mobile first but thinking outside of the traditional desktop, from phone to tablet to net-books to laptops and even TV’s.

With such a variety of devices available today that are used to view the web, we need to think not only about designing for aesthetics but we must also take into consideration the content and context that the user will view these designs in, and find a smarter design solution to fit all.

Multi screen experience

When the term “responsive web design” was coined by Ethan Marcotte, it became part of everybody’s vocabulary in a wave similar to Web 2.0. Essentially responsive design is the concept of creating one website to target multiple screens by incorporating flexible grids, layouts, images and CSS3 media queries. In this way websites can not only increase and decrease the elements as with fluid layouts but also target different resolutions by changing, hiding, resizing or removing certain elements based on the context of the viewer.

Although responsive website design isn’t the only way to go, your audience and content may call for a native app. Recently we have launched a range of native iPhone apps for our client GRDC. The reasoning behind the call for native was internet connectivity of the user and also the amount of images that will be called for in the application. Now this could have easily been created as a responsive web design and hit the market with all device resolutions. However in this instance, when thinking of the context in which the user will use this app, it was best suited as a native application.

When making decisions about designing for a multi-screen experience, designers need to be aware that people using desktops have a very different viewing habit than that of a mobile user or even a TV viewer. The importance of the elements and content that is viewed is crucial in each of these devices, and this is all dependent of the context the user may be in.

Design constrains

Now we have touched on the point that multi-screen experiences are inherently different for each device. Designers should be aware that the interaction varies with each of these devices and when designing for mobile things such as phone numbers should be much more prominent as well as menus, buttons and links. Accommodating for a larger touch based interface in your mobile design will make for a richer experience on the device. Also taking into account swipe based gestures, lack of hover on mobile devices, the need for content to be tailored in a way that it serves up the most crucial content first are some of the things that are needed when designing and considering a more multi-screen approach.

Content VS context

When designing a website to fit multiple screens it is important for the designer to think about the content that is being served from one device to the next. Not only should we take this into consideration but also the context from which a user will be viewing the content. A smart designer will:

• Take into consideration the amount of content
• How it will flow for better user interaction
• How the content will grow or shrink overtime in length
• With multi-screen devices how the content will fit each device but not only fit but also what content that users will need for the context that they foresee the user(s) to be viewing this content in.
• Start with content and then search for all the essential things that are needed and explore how well each element will scale

It is not enough in this day and age, with all the devices we have, to design a site for art sake and the beauty of aesthetics. If the whole purpose of the site is to achieve certain goals then we need to think much more intelligently about the flow and interaction of content in the user’s context.

In general your content and graphic evaluations should stem from user research and study of the common interaction behaviours associated with each device.

Where to from here?

The challenges of designing for multi-screen are ones that we can tackle with some intuitive and creative responses, and generally constraints bring out more creative responses that address the issues in a much more unique way.

Starting with some user research into content and context interactions, designers need to be able to determine how elements on a page will redistribute. How designers can achieve this is by better collaboration between designers and developers. Rather than designers designing and creating the unique designs themselves then handing it over to the developer, designers need to have much more collaboration between developers and the project managers to gather the right content and also the right technological constraints, plus multiple heads thinking are always better than one!

With responsive designs there is a world of possibility and the good thing is clients generally recognise the importance of reaching larger audiences by accommodating more of the different devices and platforms that people are using.

There is a world of potential for creativity and intuitive, unique designs that can be explored with multi-screen devices and responsive designs. For designers creating new designs for multi-screen environment, there is much more to take into consideration but also a lot more fun that can be had with our designs.