Step 4) Understanding the target devices /platforms – PART 3 of 4

“Is this your best design solution?” my mentor asked me, staring in my eyes.

“Yes” was my confident answer :).

He said, “I bet that!”

This was eight years ago. I went back to the blank canvas and created 4 different design solutions for a portal solution. The notion of creating multiple design explorations has stayed with me for many years; it has helped me to design better.

I remember when I was at National Institute of Design (NID); I took a two-week coursework in photography. We were handed manual SLR cameras and told to shoot 6 rolls of pictures. My faculty member, Dr. Deepak John Matthew, shared a story about he understood the basics of photography (composition, balance, symmetry, framing, etc). When Deepak himself was a student he was told by his instructor to go to Gateway of India and shoot pictures. He came back and showed the 1st camera roll. The instructor asked Deepak to redo this exercise, 2nd time with a specific instruction ‘get the pictures from the spots & angles that you have not taken in your previous exercise’. Deepak showed the round 2 photos to the instructor. History repeated – he was told to do the same thing 3rd time. Frustrated, he went back to Gateway of India and took photos that he had not thought of in the first and the second attempt. On the third presentation of his photos, the instructor told Deepak that he was happy with the result. Curious, Deepak asked the instructor what was the need for all those 3 trips. The instructor said, “ Only when you are working with constraints, you will think differently and come up with different solutions. With every trip, your constraints multiplied and it forced you to chose spots & angles which could capture a better picture”.

There is no better story to drive home the point that design explorations is all about understanding your constraints, having multiple point of views (spots / angles) and having a different approach towards design solution.

Legendary designer Charles Eames quoted, “I have never been forced to accept compromises but I have willingly accepted constraints.”

Working with constraints is one of the ways to think & conceptualize. It forces you to perceive things differently. There are several other techniques that will help you to conceptualize.

Luke Wroblewski presents a different viewpoint in his book ‘Mobile First’ about how should one design for a mobile device. The principles presented here are applicable for non-mobile platforms too.

There are other methods like lateral thinking, which might suit someone.

A concept is made when you bring together all your methods of thinking, ideation, points of reference, your design inputs, context information and create a design solution that resonates with the real-world needs.

A concept can be an abstract idea. As a designer, you have to sketch out your ‘mental representation’ of what could be a design solution. It may not be a great design solution in the first attempt. Conceptualization is a process of creating multiple design solutions, improvising the same, and arriving towards a mature design solution.

Conceptualization is about having different points of reference and deriving the different meanings, accordingly.

As you may recall in our older blog post – the design explorations / sketches that you create, will depend upon various data points. Now you have all the information you need from the stakeholders and users, you got the tools and the blank paper is staring at you :). How do you start? Just take a paper and pencil and start sketching :). Capture all the concepts that come to your mind.

Let me present an example here – I was working with TechMahindra till Apr’13. Here is the ariel view of it’s offices in Pune (courtesy – Google Maps).

TechMahindra Office in Pune City

TechMahindra Office in Pune City

Marker A represents the building I was located in – Annex, 2nd floor.  I was told to relocate to the adjacent building named Sharda Center 5th floor, indicated in the picture by marker B. The highlighted box in the photo shows walking bridges that connects two buildings.

The architecture of these two building presented food for thought – what was supposed to become a routine activity (moving around from one building to another) suddenly became a need to ‘learn’ 🙂 – the way the buildings are connected, where the elevators are located and how the elevators operate :).

This is how the buildings were connected to each other, via the walking bridges:

  • 1st and 2nd floor of Annex were jointly connected to 2nd floor of Sharda Center
  • 4th and 5th floor of Annex to 4th and 5th floor of Sharda Center

The Annex had three elevators – a parking elevator that stopped on every floor. Two capsule lifts/elevators that stopped at alternate floors only (i.e Capsule lift#1 will stop at floors 0, 2, 4, 6 and 8. Lift#2 will stop on floors 1, 3, 5 and 7).

Sharda Centre had 3 elevators and none of the elevators stopped on 1st floor – the 1st floor was not rented by TechMahindra. In contrast to the Annex, these elevators stopped on every floor.

So here I was looking at a design problem – how to ensure that there is a ‘smooth passage’ from one building to another?

I took this opportunity of chaotic architecture and elevators to come up with information graphics. I experienced the confusion first-hand to move from one building to another. My peers (15 designers) were also in the same boat :), who had been told to relocate from the Annex to Sharda Center.

I made an assumption that visually I will show only one of the floors (between 1st and 2nd floor of Annex) to be connected to 2nd floor of Sharda Center – to avoid further complications. The concepts that I created can be termed as ‘explorations’ – I experimented on different orientations, visual forms to present the ‘chaos’ in a lucid manner. For some concepts, I succeeded and for some, I did not :).

I created the following six concepts / sketches addressing this unique design problem:

Sketch#1:

Elevator1

Elevator1

Sketch#2:

Elevator2

Elevator2

Sketch#3:

Elevator3

Elevator3

Sketch#4:

Elevator4

Elevator4

Sketch#5:

Elevator5

Elevator5

Sketch#6:

Elevator6

Elevator6

Of course, there could be more visual representations of the same problem. May be #1and #6 and be combined and something new can emerge. It’s all about putting down your mental representations on the paper and trying to achieve different points of view :).

Going back to the first story, I came back to present my 4 new design explorations and presented it my mentor. He was glad to see the variations in thinking. Talking about the design constraints, he concluded, “Do what you can…..where you are & with what you have”. I responded to his advice and I hope I have responded well :).

We have almost reached to the end of 4-step journey of paper prototyping. In our next and last post (Step 4 of 4), let’s look at paper prototypes’ validation techniques and activities conducted after paper prototyping.

Step 4) Understanding the target devices /platforms – PART 2 of 4

“Do not get trapped in tools! Focus on the design problem & apply the best design practice”- was one of my mentor’s guiding principles on user experience design.

I believed in him. That was 2004 then. Web 2.0 had not yet hit Indian shores. The designers had very limited digital tools for wireframing. Microsoft Excel & Visio were the de-facto tools for digital wireframing. I never visualized that the mighty Excel could churn out interactive prototypes. I found a new respect for Microsoft Office applications.

Couple of years down the line, Web 2.0 was in everyone’s slidepacks, the social networking phenomenon caught attention of users (Orkut was the cool place to be), and mobile apps ecosystem made a grand debut. The digital product design required new set of tools, new hands & minds of the designers. New interaction patterns were designed & published every day.  Some designers of 2004 had to take a ‘T-shaped’ approach towards design. I am one of them.

Tools – old or new, the way to reach a digital prototype has not changed. Paper prototype is never omitted :). Digital prototypes are created after the paper prototypes mature.

What has changed is the way the tools / stencils / templates are used, in creating paper prototypes. Earlier, I used a blank canvas for sketching user journeys. Now, I use the following templates –

1)   Designing a web based application / portal / enterprise dashboard

Browser Template

Browser Template

The result of using this template is –

Usage: Browser Template

Usage: Browser Template

 

 

2)   Designing an iPhone application

iPhone Template

iPhone Template

The result of using this template is –

Usage: iPhone Template

Usage: iPhone Template

3)   Designing an iPad application

iPad Template

iPad Template

The result of using this template is –

Usage: iPad Template

Usage: iPad Template

4)   Designing an Android application

Android Template

Android Template

The result of using this template is –

Usage: Android Template

Usage: Android Template

Of course, there are multiple templates that you can choose from. Sample this: http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/

Remember, as the saying goes, “let’s not get trapped into tools” :). Achieve a fine balance between the UX design tools and the design philosophies. Get the job done :).

In our next post, let’s see how to sketch on the paper – how to conceptualize the user journeys.

Step 4) Understanding the target devices /platforms – PART 1 of 4

It’s time.
It’s time to design.
You know the users.
You know the market.
You know the people very well, whose money is riding on your idea :).
You know the timelines.
You know the constraints.

It is important to know the devices/platforms that you are designing for. The software and hardware are intertwined. Know the devices / platforms well enough so that your design solution utilizes the device’s capabilities to a great extent.

Get yourself familiarized with the device. If you are designing an interface for television, spend hours playing with the TV remote and watching TV. TV remote may open up possibilities in your interface design.

TV Guide

TV Guide

If you are designing a control panel for a washing machine, get the brains of the industrial design and engineering team. Understand the machine capabilities, the happy paths (e.g. musical tone to indicate that washing is done – scenarios in which user will not encounter any problem) and exceptions that come with the machine (e.g. the washtub is overloaded). Understand what the machine CAN DO and CANNOT DO. People will tell you what the machine is SUPPOSED to do :).

Washing machine control panel

Washing machine control panel

Test the device to the limits – both in terms of software and hardware. Imagine the worst-case scenarios of usage.

When iPad was launched in 2010, Amazon came up with a funny ad for Kindle. Clearly, it knew the device positives, the users and the context. Here is the ad:

We have embraced touch-screen interactivity in majority of the devices. Mobiles, tablets, ATMs, point of sale terminals, medical devices, field-force devices all have touch-screen capabilities.

Devices also come with their own interaction & visual design language.  Apple’s iOS applications have to be designed keeping in mind the ‘Apple-ness’ – the way interfaces look and behave.

Apple has published its Human Interface Guidelines to help designers and developers create new iOs apps.

iOS Human Interface Guidelines

iOS Human Interface Guidelines

Google also has published its Android mobile UI guidelines. Slowly and steadily, it is bridging the gap with iOS in terms of the ‘experience’ of using Android applications, vis-à-vis iOS applications.

Android Design Guidelines

Android Design Guidelines

E-commerce websites have evolved over time. Take example of Amazon that started selling books and now sells everything on earth. Another candidate is eBay, which has maintained its DNA of being the flea market on the web, right from its inception. eBay has undergone changes to its website.

eBay has published its ‘pattern library’ online to familiarize the interaction designers & visual designers with its unique templates that define the eBay experience.

eBay UI pattern library

eBay UI pattern library

Understanding the devices brings in our discussion on the ‘T-approach” in older post: know the devices and target platforms as much as the user needs. A little more knowledge will surely help you. Less knowledge about the device / platform may create a loosely coupled design solution.

Gene Kranz, the flight director of Apollo13 quoted the famous lines while discussing the options of bringing the astronauts back to earth. His team members debated on the limitations of the lunar module – designed only for landing on the moon, not to fire the engine & come back. Kranz replied, “I don’t care what anything was designed to do. I care about what it can do.”

Great designers see the product in one shot – fusion of hardware, software, interactions and experiences. That’s what makes a great product great :).

In our next post, lets look at the tools that you will need to create the sketches / paper prototypes.