EXPERIENCE USER

WRIT TEN B Y

CROSS-PLATFORM

EXPERIENCE USER

SPRUIJT

JORDY

/ 03

PREFACE

Four years ago, I started the study Communication and Multimedia Design. I worked with a lot of pleasure and I worked in teams with a lot of talented, young and inspiring people. In these years I learned more than I expected. I have been working on the person I am now, I’ve worked on my ambitions and on myself. It’s a good start for my future. And therefore I want to thank a couple of people.

I am proud of what I’ve learned over the last four years. I’ve changed as a adult person. I want to thank a few people who have helped me and who have supported me in the past period.

First, I thank my family. They had to miss me during the time I was abroad.

I particularly enjoyed their spontaneous visits to my place.

Second, I want to thank my supervisor Herr Class for the accompanying help during my graduation period. I’ve really appreciated that he was always available and willing to help me if I had problems.

I thank him for getting the chance to graduate at Designdealer.

Third, I appoint my colleagues at

Designdealer, because I have had a really nice time with them. We laughed a lot and I’ve also learned useful tips and tricks from them.

Thank you!

Jordy Spruijt

Fourth, I thank my supervisor from school, Mr. den Otter, for the availability and the feedback by using digital capabilities.

Fifth, I don’t forget Mr. van Kemp. He always inspired me very much and gave me the feeling to believe in myself. He knew what I had in me, he saw me as a valuable person.

Finally, I want to thank my girlfriend for all her support from the beginning till the end. Without her, I couldn’t start a graduation at Designdealer. She helped me with the German language, with emails and contacts, and she helped me with searching some design bureaus.

FEBRUARY AUGUST 2011

#1 INTRO

#2 USER EXPERIENCE AND USER CONTEXT /1 what is user experience?

/2 user experience honeycomb /3 the elements of user experience /4 the user’s experience cycle

/5 desktop user experience and user context /6 mobile user experience and user context /7 using mobile devices

/8 conlusion

#3 NATIVE APPS, WEB APPS, RESPONSIVE WEB DESIGN, AND MOBILE FIRST /1 native apps

/2 web apps

/3 mobile web app framework /4 responsive web design /5 mobile first /6 conclusion

#4 CASE STUDY /1 focus group

/2 research method and final product /3 concept

/4 smartphone /5 desktop /6 conclusion

PAGE 06 PAGE 14 page 16 page 17 page 18 page 21 page 22 page 24 page 27 page 29 PAGE 30 page 32 page 33 page 34 page 35 page 38 page 39 PAGE 40 page 42 page 43 page 44 page 46 page 50 page 60

#1 INTRO

Before you start reading this document, I recommend you to read the following pages

with information. It contains the information about what I’ve written and what you are

going to read about in this document. I’ve searched for sources that could help me

to create this information and insights. I’m very pleased with the result and what I

learned. I hope you can learn from this document. If you have questions, please feel

free to contact me. I’m always open for getting feedback and to start a discussion.

Problem Definition

Designdealer and its clients manage all their activities over direct phone calls and e-mail traffic. However, in some cases it causes miscommunication and many things may be unclear. They want me to find a better way to manage their brand activities and work closer with their clients.

Research Question

How can I create an online brand management platform for Designdealer and its clients?

Assignment Description

Create a cross-platform online brand management platform for Designdealer and its clients.Principal

Designdealer is a communication agency

in Stuttgart, Germany. Figure 1.1 - Thats me !

Name

Student Number Major

Minor Title Subject

Version

Company

Graduation Company Supervisor

University

1st University Supervisor 2nd University Supervisor

Jordy Spruijt 0794215

Communication & Multimedia Design User Experience Design

Cross-Platform User Experience User Experience for Desktop and Smartphone

1.4

Designdealer Jörg-Steffen Class

Hogeschool Rotterdam Rolf den Otter

Hans Kemp

“JUST SOME QUICK INFORMATION”

/ 11

#1 Intro

/ 10

#1 Intro

Explanation of the Problem

I’m very interested in working with mobile devices, personally I use them a lot.

Designdealer also believes in the future of mobile devices. That’s why they want to start working more with mobile devices.

The employees of Designdealer make a lot of phone calls during their work to manage all of the current activities. They also get overloaded with e-mail conversations. This causes a common problem that many people will recognize: miscommunication.

Within a project, there are several people involved from various companies. Those people also have a different function in relation to the project. It’s difficult to make sure if you contacted all of the relevant people. It would save a lot of time and misunderstandings when there would be a better and clear way to manage all the stuff.

Problem

Designdealer gets overloaded with e-mail conversations and various phone calls.

This causes some miscommunication and will take some more time later to manage

and solve the misunderstandings.

Research Question

How can I create an online brand management platform for Designdealer and its clients?

Sub Questions

1. What is the user experience and user context on desktop and smartphone devices?

2. What are the pros and cons of native apps, Web apps and responsive web design?

3. What are the needs and wants of the users of my product?

4. How can the client take advantage of my concept?

Reason for this Assignment

In the third year of my study, I choose the minor User Experience Design. Since then, I focussed more on the user experience of multimedia products. At the same time, there was also an increasing pupularity of mobile and tablet devices like the iPhone

and iPad. The come of those devices gave me a huge boost, because it opened a new world. We started to use modern ways of input, like touchscreen and multi- touch. New gestures were coming, we used familiar metaphors and focused more on the user experience. Our view on the web as we know it changed a lot.

I started to think different, because there were so much more possibilities. It was a new challenge! Luckily I found a company that gave me the freedom to design for those platforms. I can increase my skills in those smart innovations and new user experiences.

I also have a privat reason for choosing to go abroad to graduate. I live in The Netherlands, but I have a German girlfriend for almost 4 years now. When I move to her place, it will create a unique challenge for me to start this adventure.

Goal

This project has a goal, of course. My thesis is intended to be a guideline for those who want to create a concept or application for more than one device. All

the important information they need to know before, they can read in my thesis.

The final product consists of a prototype for a desktop, smartphone and hopefully also a tablet device.

Definition of the Research Objectives

First, I want to research the user experience and the user context of desktop, smartphone and tablet devices.

Secondly, I want to learn from the guru’s which already set up great theories, phylosophies and models. I will approach some of those theories and models that I used in my design proces.

Thirdly, I want to start realizing a prototype of my concept. For that I need to know which approach I am going to use for this concept. I will do some research about Mobile Web App Frameworks, Native Apps and Responsive Web Design.

“THE PROBLEM, MY RESEARCH QUESTION, SUB QUESTIONS AND MY FINAL GOAL.”

Figure 1.2 - Photos of the interior at Designdealer

“SOME INFORMATION ABOUT DESIGNDEALER”

Principal

Designdealer is a communication agency in Stuttgart, Germany.

Company Information

Since 2000, Designdealer creates thoughtful concept designs with a high standard of quality. They offer cross-media support, from initial concept to production and value an informal and effective working relationship. That’s how they can fill in the clients needs and wants at their best. ¹

Contractor

I am the contractor, Jordy Spruijt, graduating fourth year student at the Hogeschool Rotterdam. I study Communication and Multimedia Design (CMD). My minor is User Experience Design (UXD).

1.1 Website Designdealer

Online Brand Management Platform

Designdealer is a communication agency.

They work on variable projects for their clients. During the design process the employees communicate a lot with people from various companies, different departments and different functions. Everybody gets overloaded with e-mail conversations and numbers of phone calls. This may cause some miscommunication and will take some more time later to manage and solve the misunderstandings.

It would be great if there would be a platform service where everything comes together. That’s what I’m going to create:

An online brand management platform where everybody can stay up-to-date from anywhere on any device. People must login first to access the data. They must be able to access the files and to start discussions by giving feedback on the files in an quick and easy way.

BRIEFING 2.0

Web- and application design professionals use the term User Experience Design (UXD) to refer to the application of certain user-centered design practices, a highly contextual design mentality, and use of certain methods and techniques that are applied through process management to produce cohesive, predictable, and desirable effects in a specific person, or persona (archetype comprised of target audience habits and characteristics). All so that the affects produced meet the user’s own goals and measures of success and enjoyment, as well as the objectives of the providing organization.

Understanding the user context means understanding how, where, when and why that person is using their device.

#2 USER

EXPERIENCE AND

USER CONTEXT

The three circles

First I would like explain what User Experience Design (UXD) really is. There are a lot of persons and theories who claim they have the best definition about what UXD is and how it works. I want to kick-off with a simple model from Peter Morville (Figure 2.1).

This three circles diagram is a great tool for explaining how and why we must find a unique balance between business goals and context, user needs and behavior, and the available mix of content. ¹

The user can be different, that’s first. Think about age, interests and knowledge.

Secondly, the context where the user is interacting with the content may change all the time. Maybe the user is sitting behind his/her desk in a dark room or it can be that the user is travelling by train and the sun shines inside.

Thirdly, the content can be variable and may ask you to interact.

2.1 http://semanticstudios.com/publications/

semantics/000029.php – Morville, P. on Semantic S tudios, 06/2004

The User Experience Honeycomb

Later, Peter Morville found the need for a new diagram. He illustrated the facets of user experience (Figure 2.2). This is especially to help others understand why they must move beyond usability and have to define priorities. While this diagram was conceived with Information Architecture in mind, it’s equally useful for explaining User Experience Design.

Useful - We can’t just paint the content within the lines like the managers want to have it. No, we have to be creative to make our products and systems more useful. We have to apply our deep knowledge to define innovative solutions that are more useful.

Usable - Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.

Desirable - Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.

Findable - We have to design navigable products and locatable objects, so users can find what they need.

Credible - Users have to believe what we tell and what we offer them. We can control this by using the right design elements which have influence on the users trust.

Valuable - Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission.

With for-profits, it must contribute to the bottom line and improve customer satisfaction.

/1 WHAT IS USER EXPERIENCE?

Figure 2.1 - Peter Morville’s - The Three Circles of Information Architecture (self recreation)

While this diagram was conceived with Information Architechture in mind, it’s equally useful for explaining User Experience Design.

/2 USER EXPERIENCE HONEYCOMB BY PETER MORVILLE

for a complete overhaul. You can try to evaluate your website and then edit your design in a better way.

Third, each facet of the user experience honeycomb can serve as a singular looking glass, transforming how we see what we do, and enabling us to explore beyond conventional boundaries. ² So when you start a new design for a website or an application, give it a chance to take a look at this model. Maybe it will help you to come up with some creative ideas or innovations.

Restructured User Experience Honeycomb

This time, Magnus restructured Peter Morville’s User Experience Honeycomb in a different order and removed the honeycombs. Now the facets are in order of experience. He explained every facet very simple and easy to understand.

2.2 http://semanticstudios.com/publications/

semantics/000029.php – Morville, P. on Semantic S tudios, 06/2004

First you need to know which facets have the highest priority. This depends on your unique balance of context, content and users (Figure 2.1). The required trade-offs are better made explicitly than unconsciously.

Second, this model supports a modular approach to web design. There is an alternative for you if you want to improve your site but don’t have the budget or time

Usability - You have to be able to use something to do something with it.

Credibility - You have to trust something before actually committing to solving a task with the service. This could be a decisive factor for using the product or service.

Usefulness - Usefulness is last, because a user forms an opinion about usefulness when he leaves, hopefully after completing his task.

Value - Value is the result of the user experience and not a facet of it. ³ If you decide to use the models in your design process, remember to check the models regularly. Checking the model can bring you innovative and new ideas or other insights on your product or service.

You can’t use what you can’t find

peter Morville

2.3 http://userexperienceproject.blogspot.com/2007/02/

restructuring-user-experience-honeycomb.html – Revang, M. on User Experience Project

Findability - Obviously, you can’t use what you can’t find.

Accessibility - You can’t use what you can’t access. If you can find something, but you have no access, then it is inaccessible.

Desirability - You see the interface before you use it. Design your interface for what it has to represent. Make it attractive for the audience.

Figure 2.2 - Peter Morville - The Three Circles of Information Architecture (self recreation)

Figure 2.3 - Magnus Revang - Restructured User Experience Honeycomb (self recreation)

/ 18 / 19

#2 uSer experIence and uSer context #2 uSer experIence and uSer context

/3 THE ELEMENTS OF USER EXPERIENCE BY JESSE JAMES GARRET

The user experience is all about being sure that no aspect of the user’s experience with your product happens without your conscious. This means that you have to check every possibility of every action the user is likely to take and understanding the user’s expectations at every step of the way through that process. It sounds like a lot of work, maybe it is. But when we split up the whole into components, we can better understand the task as a whole. For that we use a popular model of Garrett (Figure 2.4).

All of the decisions about how the site looks, how it behaves, and what it allows you to do results in a user experience.

User experience actually can be split up in layers. This model is mainly supposed for user experience on the Web today.

The Surface Plane - The first thing what you see on a web page is the surface. It consists of some images and text. Some images are interactive, when you click on them they will perform an action or function. Some of these images are just illustrations which are not interactive. You can go further and think about smell and taste, touch, hearing and vision.

The Skeleton Plane - Beneath the surface is the skeleton. The skeleton defines the placement of all the elements on the web page, like the buttons, controls, photos, and text blocks. It’s needed to optimize the arrangement of these elements for maximum effect and efficiency. You will probably look weird when you are searching for the logo and you finally find it at the bottom of the web page. Make your interface consistent with others that your users are already familiar with.

The Structure Plane - The skeleton is a part of the more abstract structure of the site.

The skeleton is actually the placement of the interface elements. But the structure defines how a user got to that page and where they could go to. The skeleton could say that there are 5 navigation buttons in the main menu. The structure

Figure 2.4 - The Elements of User Experience by Jesse James Garrett (self recreated)

CONCRETE

ABSTRACT

SURFACE SKELETON

STRUCTURE SCOPE STRATEGY

would define where you go to when you click on one of these navigation items.

The Scope Plane - The scope of the site is what the functions and features are.

Which features and function are included in the product is just a question of scope.

For example, you can recommend more products on a product detail page of a webshop, or you just let your users search for related products by themselves.

The Strategy Plane - The scope is

fundamentally determined by the strategy of the site. The strategy incorporates what owners of the product want to get out of it and want the users of the product need and want to get out of it. The strategy is actually the idea and the goal behind the whole product and brand identity. ⁴ When we talk about user experience, we talk about these five planes as a basic for a user experience process of your product, service or system. This framework is a useful tool to solve user experience problems. The aim is to become more

2.4 Book: The Elements of User Experience by Jesse James Garrett, 2011

concrete at each plane. So at the bottom plane, you don’t mind about how the shape of the site, service or product will look at all. You just care about how the site will fit into your strategy. The higher you get in the planes, the more concerned you are about the details of the appearance of the product. You get more specific plane by plane.

So, for you – designers – it is important to take a look at each level/plane of this model. Each plane is dependent on the plane below or above it. When the choices during the process don’t align with those above an below, the project might fail, deadlines will be missed, costs will increase, and the project derails. But worse, when the product will be launched, users will often hate it and stop using it, because it doesn’t deliver a satisfying experience.

User experience is about how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.

Wikipedia ⁵

2.5 http://en.wikipedia.org/wiki/User_experience – 05/2011

THE ELEMENTS OF USER EXPERIENCE BY JESSE JAMES GARRET (CONT.)

In this model you can take a closer look how to design the whole user experience (Figure 2.5). Maybe its easier to understand when we break down each plane into its component elements.

The Strategy Plane - The user needs are the goals for the site that come from outside our organization, specially from other people who will use our site. The user is the most important target, because they will use our product, they have to leave/finish your product with a satisfied experience.

The Scope Plane - This plane contains the functional specifications. It’s a detailed description of the feature set of the product. It also contains the content requirements, a description of the various content elements that will be required.

The Structure Plane - Here is defined how the system behaves in response to the user. We call it interaction design, which gives structure on the functionality side.

The content also have to be arranged for human understanding. The structure of that is defined by the information architecture.

The Skeleton Plane - In the skeleton plane we

must address information design to present the information in a way that makes it easier to understand. Secondly, it includes interface design for arranging interface elements to enable users to interact with the functionality of the system. Thirdly, the information resource needs an interface, that’s the navigation design. It’s a set of screen elements that allow the user to move through the information architecture.

The Surface Plane - On top we have the surface plane. It doesn’t matter if we have a functionality-oriented product or an information resource. Both products create a sensory experience. ⁶

So, maybe you understand this model from Garrett better than the previous. Just try to focus at it sometimes and hopefully it creates some innovative fresh ideas for a user experience.

2.6 Book: The Elements of User Experience – Jesse James Garrett, 2011

CONCRETE

ABSTRACT

INTERACTION

DESIGN INFORMATION ARCHITECTURE

FUNCTIONAL

SPECIFICATIONS CONTENT REQUIREMENTS

USER NEEDS PRODUCT OBJECTIVES

INFORMATION DESIGN

INTERFACE

DESIGN NAVIGATION

DESIGN

VISUAL DESIGN

Figure 2.5 - The Elements of User Experience by Jesse James Garrett

The Elements of User Experience

This model tries to explain the process of a user who is having an experience. The user experience is an interconnected cycle of attempting to satisfy hopes, dreams, needs, and desires.

Trigger - There must be a satisfying factor that makes the user want to use the product or service.

Expectation - When using a product, what does the user expect to do and how does he expect to do it? At the end the user also has to finish his task, how does he expect to finish it or get out of it?

Proximity - How close is the user to the necessary part of the system? Does he knows where he is exactly, or does he just think where he is?

Awareness - Does the user know what the necessary part of the product or service is? The user should not be distracted from the necessary part of the product.

Connection - Does the user make a connection between his needs and the necessary part of the system? Does the

system responds like the user is expecting so that he can act on it?

Action - Can the user take action, or is there a mismatch with how he expected to act and the actual action required?

Response - After the action, the system provides a response, is it the response what the user expected? Does it meet the need of the user?

Evaluation - After the response, the user will compare his expectations with the system response. Based on that, the user will adjust his own evaluation.

+

If the expectations of the user are the same as the system actually responded, the user will continue the cycle until his need is satisfied.

–

When the expectations are different than the system actually responded, the user will stop using the system and leave. ⁷

2.7 http://nform.com/files/experience_cycle.pdf – Jess McMullin, 2003-2004

So, when you are designing a website or application, think about the logical expectations what your user would have when they want to do an action. Use metaphors in the right way and let the action do what your users would expect.

This part especially takes part of the Scope Plane and the Structure Plane of Garret’s model (Figure 2.4). You have to think about what your users would expect of your functional specifications, content requirements, interaction design and information architecture (Figure 2.5).

/4 THE USER’S EXPERIENCE CYCLE BY JESS MCMULLIN

EXPECTATION PR OXIM

ITY A

WAR

ESEN S ONN C IO ECT N CTI A ON SP RE NO

SE

EVALUTATION

TRIGGER

THE USER’S EXPERIENCE

CYCLE

Figure 2.6 - The User Experience Cycle by Jess McMullin

/ 22 / 23

#2 uSer experIence and uSer context #2 uSer experIence and uSer context

We all know the faithful personal desktop computer for regular use at a single location. It consists of a computer case, monitor, keyboard and mouse. Computers can come in many different sizes. Desktop computers have a totally different user experience and user context than mobile devices. That’s why it’s interesting to compare those all-day machines and find out what is unique about a desktop computer. ⁸

Advantages over a mobile device

1. Bigger screen - Let’s start with the much bigger screen from a desktop computer compared to a mobile device. You can put a lot more content on such a large screen. This avoids most of the content struggling moments for designers.

2. Desk mounted monitor - A second advantage of a desktop computer is that you have a desk-mounted monitor. That means your monitor is not jolting around like your

2.8 http://en.wikipedia.org/wiki/Desktop_computer – Wikipedia, desktop computer, 2011

smartphone in your hands while walking on the street. The monitor is on a stable surface, like a desktop in your office or at home.

3. Stable internet connection - Most of the desktop computers are connected to an internet connection. Today, most of the internet providers deliver fast internet. Enough to browse the web within seconds, chat with your friends, watch streaming videos and download music at the same time.

4. More time - Time is an important factor for the users, do they have time to browse or not? This decision will affect their experience from your website or application. When users need to find something very fast, they don’t have much time for your time-consuming animations. So, when your website is full of beautiful transitions, animations and long taking loading times, your users will be restrained. But when they have more time to spend on your website or application, it’s not a big problem to show them some fine interaction animations or smooth looking transitions.

5. Quiet environment - You will probably know that when you’re walking with

your mobile phone on the streets, it may be noisy and distracting in your environment. But by contrast, your desktop computer will be – in common cases – in a quiet environment. You will be sitting in your living room or in your office. Your concentration will be more focussed in a quiet environment.

6. Write down a note - In some cases, you want to write down a quick note to remember something for later. On your desk, probably will be pen and paper to take notes. But walking around with your mobile phone isn’t the easiest way to write down a note.

7. Sitting down - Sitting down on a comfortable chair is quite better than standing or walking around.

When sitting comfortable, it’s not a big deal to take a few more minutes to read an article. But while walking through the city, you’ll have to watch your steps. It’s harder to read longer parts of a text, because your focus is constantly distracted from your screen.

8. Separated phone - Can you imagine, you are planning a route from your current location to your home address and you’re waiting for the

results. Then you’re getting a call from your wife, she asks how late you’re coming home. You want to answer her question by watching the arrival time of your calculated route.

But your route has faded away to the background because your wife is calling you, so you’re not able to see it before ending the call. On your desktop computer, you will not have this problem. The phone is separated from your device.

9. Multitasking - The problem above has to do with multitasking. On a desktop computer, you can run different applications and switch from application whenever you want.

Reading your e-mail, browsing the web and chatting with friends is no problem. Some modern smartphones now also support multitasking, but not all smartphones do. So when you want to run another application, you’ll first have to close the current application and then launch the next application. That’s the advantage of a desktop computer.

10. Light - The last interesting point in your environment can be light. Your desktop is – in common cases – placed in an artificially lit environment.

/5 DESKTOP USER EXPERIENCE AND USER CONTEXT

That means that the light is always coming from the same angle and does not vary from brightness. ⁹

The Mouse and Other Pointing Devices

Using an indirect control device is nothing like a touch screen. Our fingers are not placed directly over the objects we are manipulating, so some analogue to the mouse pointer has to work, and work well.

Using an indirect control device is nothing like a touch screen”

Wesley Fenion

On a desktop computer, the standard pointing device is the mouse. In 1963, Douglas Engelbart invented the first mouse prototype. ¹⁰ Users can substitute other devices – such as trackballs and stylus pens – that maintain the behavior of direct

2.9 http://www.purecaffeine.com/blog/design/the-mobile- experience-is-nothing-like-desktop/ – Nathanael Boehm, UX Designer, 09/2010

2.10 http://en.wikipedia.org/wiki/Computer_mouse

manipulation of objects on screen. Just moving the mouse changes only the pointer’s location, and possibly its shape.

Pressing the mouse button indicates the intention to do something, and releasing the mouse button completes the action.

There are different ways and combinations to use a mouse and it’s buttons to complete multiple actions. Every user can define it’s own optimal preferences for his mouse. ¹¹

2.11 http://www.tested.com/news/microsoft-mouse-buttons- edge-out-multi-touch-in-performance/847/ – Tested.com, Article about Input Devices, 08/2010

The Trackpad

Some people have a portable computer, better known as a laptop. Most of the modern laptops have a trackpad. The trackpad offers an alternative way to interact with applications on laptops.

People use their fingers on the trackpad to perform actions they might otherwise perform using a mouse.

Very modern laptops may have a multi- touch trackpad. Multi-touch trackpads can support gestures that have more complex behaviors. ¹²

The Keyboard

The keyboard is primary used to enter text, just like I’m typing this text here right now. The keyboard may also be used for navigation, but it should always be an alternative to using the mouse.

2.12 http://developer.apple.com/library/mac/#documentation/

userexperience/conceptual/applehiguidelines/XHIGUserInput/

XHIGUserInput.html – Apple Human Interface Guidelines, 08/2009

Fundamentally, ‘mobile’ refers to the user, and not the device

Barbara Ballard

Mobile

The term ‘mobile’ refers to the user’s situation, not the device. People are mobile, not their devices. The key to designing for mobile users is to understand their context. Understanding their context means understanding HOW, WHERE, WHEN and WHY that person is using their mobile device. ¹³

The mobile experience is nothing like desktop

nathanael Boehm

You - as a designer - have to think about many aspects when you want to understand your users’ context. You have to know your users and in which situations

2.13 http://www.wsol.com/White_Board/Topics/Design_

Advice/Mobile_Web_Site_Design__What_You_Should_Know/ – Dennis Kardys, User Experience Designer at WSOL, 11/2009

they might be accessing your application on a mobile device as opposed to on a desktop PC. You also have to know their constraints.

People can have physical constraints while using their device. Users can access their device during idle moments. For example, while travelling or between other daily tasks. Or they operate their mobile phone with one hand, on their bicycle, while driving or while carrying a shopping bag. Your content or service could provide some value, based on their situation.

People often use their device in short time frames, but frequently return to the usage again. Think of checking what time it is or reading some new E-mails.

Also if your users are using a mobile device, their can still be a difference between different types of mobile devices.

Some are using older mobile phones and others are using hypermodern smartphones with the latest technologies.

UX Design is not one size fits all

Smashing Magazine

Device constraints

Most of the mobile devices have a small screen size. They vary from pixels in width and height and from pixel density, pixels per inch (ppi). Network connectivity can be intermittent or slow. Some users might have unlimited network connection which is fast enough for browsing and downloading online videos. Other users have to pay per Megabyte and have a quite slow internet connection. In both cases devices can ask you to be patient, because it has long page loading times.

Every mobile device contains has a browser. But the support for advanced web functionality can be difference between those devices.

Modern smartphone browsers support new techniques like HTML5, CSS3 and JavaScript. Modern smartphones are used a lot more by users than older versions of mobile phones. Also the screens sizes of new smartphones become bigger and require a lot more energy from your battery.

Newer smartphones may have a longer battery life, but by using it frequently, it can decrease your battery life. In some cases users have to recharge their phone every day.

Advantages over a desktop device

1. Location - Mobile devices have the functionality to find your current location. This will deliver content which is more relevant to your users’

context. For example, it’s very useful to find what movies you can watch in the theatres in your near right at this moment.

2. Internet connection - These days more people in the world have internet enabled mobile devices than desktop computers. That makes it an important - or maybe the most important - way of mass communication.

3. Personal - People have an intimate relationship with their mobile phones.

They are typically not shared the way that a family might share a desktop computer. Because of this, there’s a lot of potential to market toward an individual’s desire to personalize their device and make it their own.

4. Always on - Mobile devices are always turned “on”. Even when the user is not using his mobile phone, the phone can still receive e-mail and let you know it by a push notification.

The device is still connected to

/6 MOBILE USER EXPERIENCE AND USER CONTEXT

of multitasking. On a desktop computer you can easily work on multiple tasks at the same time. On a modern smartphone you can switch applications, but you’re getting out of focus.

8. Reflecting Screen - A well-known problem can be the strong sunlight which is reflecting on your screen. Your desktop computer is often an area where the environment is artificially lit.

9. Keyboard - Another important point is that most desktop computers will have a full 104-key (or more) tactile keyboard. Tactile pads on mobile devices usually have 2 or 3 letters to a key. The full keyboards are typically on-screen such as on iPhones but are not tactile. This has a significant impact on typing speed and accuracy. ¹⁵

2.15 http://www.purecaffeine.com/blog/design/the-mobile- experience-is-nothing-like-desktop/ – Nathanael Boehm, UX Designer, 09-2010

you don’t have much time for finding the information you want to. Unlike desktop computers, you probably have more time to sit back and find what you are searching for.

5. Changing Environment - Another big difference can be the noisy environment when you are using your mobile device. It can distract you from doing your thing. Of course it can also be noisy at your desktop computer. However, it’s generally more logical to imagine that you’re in a crowded environment when using your mobile device. A common problem is that some people are so focused on their screen, they forget to pay attention to their surroundings.

Users of mobile devices are standing or walking and at the same time they’re using their smartphone.

6. Phone Not Separate - There are scenarios that you have to use the web while calling with someone. On a mobile phone the web and the phone are in the same device. That can be a problem when you definitely have to find something while calling.

7. Multitasking - Thanks to new

technologies and updates, modern smartphones can take the advantage

1. Small Screen - First, a mobile device has a small screen. This is a huge difference, but designers have to solve this problem by being creative.

On a smartphone, you can only view one screen at a time, there you must see all the relevant information.

There’s no place for irrelevant content and oversized images.

2. Unstable Surface - Mobile devices are often not on a stable surface, they are in your hands. Maybe you are walking or sitting in the bus, your screen is shaking in your hands. At a desktop monitor, the screen is always stable at the same place in the right angle.

3. Slower Internet - Mobile devices often use cellular data connectivity or a local WiFi network. Even the best smartphone browsers aren’t that fast as a desktop browser. The page isn’t just isn’t going to be processed and rendered as quickly.

4. Short Time - When you have a lot of tasks to do, you don’t have time for doing other stuff. Maybe you have to change from train any time. Or when you are stuck in traffic, you have to be alert by not crashing into another car. These are just scenarios when online services, for example Twitter of

Facebook.

5. Always at your side - Most people always have their phone in their pocket.

People faithfully carry their mobile devices by their side. Did you ever lost your phone or even accidentally left it at home one day? People feel lost without their phone. ¹⁴

Disadvantages compared to a desktop computer

Here is a list put together of typical differentiating attributes of the two experiences. It’s not 100% correct because in some cases the reverse will be true. For example people using desktop computers can also be in a hurry and don’t have time to waste and sometimes people using mobile phones are sitting in a hospital and have hours to spare. But it’s an acceptable guide that shows some disadvantages over a desktop computer.

2.14 http://www.purecaffeine.com/blog/design/the-mobile- experience-is-nothing-like-desktop/ – Nathanael Boehm, UX Designer, 09/2010

/ 26 / 27

#2 uSer experIence and uSer context #2 uSer experIence and uSer context

MOBILE USER EXPERIENCE AND USER CONTEXT (CONT.)

Tips for designing a mobile user experience

- Create a mobile specific template.

Don’t try to recreate the desktop web experience. Develop an interface that gives easy access to the information that is most relevant to the user’s context.

- Always give a way to opt-out. Always give a way to switch from the mobile version to the desktop version. People with smartphones, may have a good network connection and want to access the desktop version. In most situations, the desktop website contains more features as the mobile version.

- Keep it simple. Focus on a limited number of pages so that there is less time wasted on page loads. Don’t build in unnecessary or complex interaction without a reason. Delete unnecessary images when possible to improve

performance. Design with limited but useful artwork, and with limited wording.

- White space. Use white space as a design tool. It shows simplicity and order. ¹⁶

2.16 http://systeminetwork.com/article/designing-mobile- user-experience – Greg Hintermeister, Designing a Mobile User Experience, 03/2010

I found this interesting graphic about things that affect user experience when using a mobile application (Figure 2.7).

On the most outer circle we have ‘culture’

which apply to many types of software, but not only specific for mobile. The two other circles are environment and activity, which are more specific for mobile and relates to location and what the user is doing on that place.

These factors can result in user

interactions which can be satisfying needs called goals and will end to be the purpose of the mobile application. The user has to complete a series of tasks to accomplish his goal. The user is constantly affected by the surrounding environment, so the level of attention can vary with time.

Then the real challenge comes, the user interface, a place where many applications fail. The interface plays an important role, because it have to balance the devices multimedia capabilities, the quality of the internet connection, and the type of services carriers provide with the social environment where the users are without affecting the seamless execution of the

ACTIVITY walking, driving, eating, juggling grocerie

s, waiting for the b us, in line...

ENVIRONMENT sound, light, space, privacy, disctrations, other pe ople...

CULTURE economics, religion, etiquette, law, social struc tures...

INTERFACE

DEVICE hardware OScondition familiarity battery level software capabilities CONNECTION speed reliability set up CARRIER practices services pricing model GOALS

identity status logistics communication information entertainment social interaction ATTENTION continuous / full continuous / part intermittent / full intermittent / part TASKS make call compose message meet friends announce location send photo view video find local information etc...

Figure 2.7 - Factors that affect user experience when using a mobile application.

/7 USING MOBILE DEVICES

goals. ¹⁷

In my opinion, this graphic model is very easy to use and to understand, because of the clear overview. You directly see which factors are having influence on the user experience. Global and general factors like the outer three circles, and personal factors like the device, the connection, the carrier, the goals, the attention, and the tasks.

Mobile lifestyle

The only true way to understand mobility is to be mobile. Most of the designers are researching and testing mobile and the mobile lifestyle from their office desk. But this is totally wrong, that’s not mobile. We must step outside the lab and rely heavily on contextual observations and daily studies that follow users through a typically day. This observation allows us to move through different contexts with our users, and learn how their modes and motivations change when they are in motion.

2.17 http://www.beepoint.com.ar/blog/2007/10/mobile-user- experience.html

Mobility is all about changing contexts:

motivational (people), environmental (spaces), technical (devices) and functional (services). We use this combination to evaluate the different contexts within mobile experiences. ¹⁸

A truly mobile lifestyle creates new contexts that demand new solutions.

punchcut

Where and where

Years ago, when smartphones were introduced into the market, they were used to help the busy professional with his business tasks. It was used for checking e-mails, track calendars, and manage contacts when they were they were away from the desk or when they were travelling.

Today, it’s totally different, it’s far from that case.

Smartphones are now integrated into the daily lives of all types of consumers. Smartphones are

2.18 http://punchcut.com/perspectives/mobile-not-device- it%E2%80%99s-lifestyle – Ken Olewiler and Sandy Fershee on Punchcut, 08/2010

now more than tiny machines which are filling our primary needs what to do with a smartphone.

Smartphone owners may be always online. It’s there for personal productivity and entertainment.

We are playing games, keep social networks up- to-date and keep everything organized.

It’s clear that smartphones are being used at all moments of the day. Think about checking the news and the weather when you get up, you ride into the city by train, you’re waiting in line for the supermarket checkout etc. Your smartphone is always at your side, just one arm’s reach away.

Brands and advertisers use this mobile medium to

offer you all types of information. ¹⁹

As a designer, we can play with these

conclusions. We know that people are using their smartphones during miscellaneous moments throughout the day. Because users always have their smartphones with them, they use them everywhere. Of course, there are moments that they have a little more time for using their smartphone, and there are moments where they have less time to use their phones.

2.19 http://blog.compete.com/2010/03/12/smartphone- owners-a-ready-and-willing-audience/ – Danielle Nohe, 03/2010

DURING MISC. DOWNTIME THROUGHOUT THE DAY AT HOME

WAITING IN LINES OR WAITING FOR APPOINTMENTS WHILE SHOPPING AT WORK WHILE WATCHING TV DURING COMMUTE TO WORK

26%

24%

12%

13%

16%

16%

9%

50%

52%

59%

53%

43%

43%

35%

16%

20%

26%

31%

36%

38%

53%

NOT AT ALL 0-1 HOUR 1-3 HOURS 3-5 HOURS 5+ HOURS

So think about your product, where do users use your application or service, and how much time do they have to use it. Consider the time-taking animations the users have to wait and the amount of steps the user has to take to reach his goal.

Optimize your product for the users and the users’

context. So, when we take a look at the theory and research in this chapter, we can take a lot of conclusions. It’s not easy to simply design an application for desktop and smartphone. You have to keep in mind a lot of well researched facts which can take your application, web site, or service into a drama. When you don’t care about your users and you just think about your own interests, your users will hate your product and won’t start using it.

Start at the first step of your design process. Think about a great strategy to persuade your user to use your product.

The user should be able to reach his goal by using your service. If the goal can’t be reached like the way the user expected, the user will lose interest and stop using your service. Fill the users needs and wants.

USING MOBILE DEVICES (CONT.)

So, when we take a look at the theory and research in this chapter, we can take some conclusions. It’s not easy to simply design an application or website for desktop and mobile devices. You have to keep in mind a lot of well researched facts which can take your application, website, or service into a drama. When you don’t care about your users and you just think about your own business goals, your users will hate your product and won’t start using it. You have to focus on your users and their context. You have to find a unique balance between business goals and context, user needs and behavior, and the available mix of content.

Start at the first step of your design process. Think about a great strategy to persuade your user to use your product.

Your users should be able to reach their goal in a satisfying way. If the goal can’t be reached like the way the user expected, the user will lose interest and stop using your product. Do research on the users needs and wants.

You have to be sure in what context the user can be using your product. The user context has a lot of influence on the user experience of your product. Assume

that the user must reach their goal in an expected way, don’t force the user to do it in an unexpected way. This will result in a bad user experience.

There are a lot of differences between the desktop- and mobile user experience.

They are used in totally different contexts and they have different or variable input devices. When you start designing a product, keep in mind for what you exactly are designing for.

/8 CONCLUSION

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another?

Or is there another option? In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

There are a lot of possibilities for developing cross-platform products.

A digital product or service looks and works coherently across devices.

Features are optimized for specific device characteristics and usage

scenarios. The advantage of this coherence is that the devices are always in sync. The product is “in the cloud”, that makes it possible to synchronise always on every device, so the user stays up to date on every device.

#3 NATIVE

APPS, WEB APPS, RESPONSIVE

WEB DESIGN AND

MOBILE FIRST

/1 NATIVE APPS

The Pros and Cons of Native Applications for the Mobile Platform

Even if your experience is rooted in web development, don’t be intimidated by native app development. These two have many similarities, especially when it comes to developing the user interface. If you decide to built a mobile web app, do it because it’s the best for your users, not just because it’s easier and more familiar for you.

Pros

1. Easy to reach audience - Your apps are easy to find in the built-in application shop. Users can search by filters, categories, popularity, top application etc.

2. First impression - In the built-in application shop of the platform, users can see a first impression of the user interface by viewing beautiful screenshots. They can read a description and user reviews.

3. Download directly - When you want to try or purchase an app, you can directly download it via the built-in application shop.

4. Easy to sell - Because you can download the apps directly on your mobile device, it is easier for you to sell your application.

5. Performance - Native apps beat web apps when it comes to performance.

They are more memory-efficient and they are using some default user interface components.

Cons

1. Programming languages - Mobile apps are not easy to build, they’re created with complex programming languages and API’s.

2. Learning the full language takes a long time - Developers of one platform can usually read and understand code from the other, but fully learning the language could take a long time.

3. Uploading to the application shop of the platform - Once an app is finished, it has to be uploaded to the application shop of the platform. For some application stores you need to be a registered developer member. You will be asked for a yearly or monthly payment. Then you will get your developer tools and maybe some

extras. Then you’re also able to upload your apps to the application shop.

4. Approval process - Google has a far less strict approval process than Apple and approves nearly everything that’s not very illegal. Also users can download apps from other places than the Android Market. There are also many more free Android apps than free iOS apps, nearly double. ^{1 2}

3.1 The Smashing Book #2 - Designing Mobile User Experiences, 2011

3.2 t3n Magazin Nr. 22, 12/2010 - 02/2011

The pros and cons of web based framework applications for the mobile platform

Making an app which looks good and works well isn’t easy. It’s not just making glossy icons and a sexy design. Creating a mobile app requires skills from a variety of disciplines: interaction design, graphic design, information architecture and ergonomics, to name a few. User experience is a combination of disciplines, so designing a fantastic mobile app calls for a combination of perspective and skills.

All web developers know HTML, CSS and JavaScript, and when starting to build a mobile app, they don’t want to put those skills in the closet. Why throw out years of experience just because the platform has changed? Now developers can choose between native specific platform apps or web based frameworks to create their apps. But there are some distinct disadvantages to keep in mind.

Pros

5. Familiar Programming Language - Developers can use familiar Web technologies. Developers don’t have to throw their familiar programming skills away. They can work with Web technologies like HTML, CSS and JavaScript.

6. Supports multiple platforms - The mobile app will run on multiple platforms without modification. iOS, Android and other platforms use WebKit- powered browsers. This is why HTML5 and CSS3 and other Web technologies will work great on them.

7. Web apps are always up-to-date - Users don’t have to update manually.

Distribution and updating can occur instantaneously simply by republishing to the web.

Cons

8. Difficult to sell - Google (Android Market) and Apple (App Store) provide easy ways for selling your apps through their stores.

9. Difficult to reach audience - Users can find and download more apps on

their mobile phone, by bringing up the built-in app shop. There they have access to thousands of apps which can be filtered for better search results or popularity. There is no direct way like this to access Web apps.

10. Performance issues - Native apps have a better performance faster than Web apps. Running HTML pages in a browser takes more loading time and is less memory-efficient as running compiled native code.

11. Lack of Widgets - iOS and Android’s frameworks include dozens of default user interface components. But you can’t use these default components when you are building a Web app.

There are some good frameworks for mobile Web apps, but they’re less polished than the native apps. ^{3 4}

3.3 The Smashing Book #2 - Designing Mobile User Experiences, 2011

3.4 t3n Magazin Nr. 22, 12/2010 - 02/2011

/2 WEB APPS

/ 34 / 35

#3 natIve appS, WeB appS, reSponSIve WeB deSIgn and MoBIle FIrSt #3 natIve appS, WeB appS, reSponSIve WeB deSIgn and MoBIle FIrSt

Develop Cross-Platform Apps with Web Technologies

The smartphone market is growing very fast and becomes complex. That’s not only confusing for buyers, but also for providers of mobile apps. How can you efficiently develop a mobile web application for all the platforms, when every platform uses his own different programming language?

You can solve the problem by using web technologies which are applicable on many platforms.

Web Technologies

On every smartphone, a native browser is installed. That makes Web applications which are optimized for smartphone platforms an interesting alternative of native apps.

Thanks to offline data storage, modern smartphone browsers cache all the required resources so they are able to open the page without mobile data connection. Modern web technologies and smartphones can access your current location for more relevant content. You can also be unique with your own customized

HTML and CSS. Adjustments to different screen resolutions are possible.

Some platforms also offer a function to save the Web application as a shortcut icon to the home screen. With special meta-tags you can declare your own icon for the home screen shortcut icon. Also there is an option to show the web apps in full screen mode, just like a native app.

Hardware

User data can be saved on devices with different technologies. For example, to save personal settings. This can be done by local storage or browser SQL- databases. When the user reboots the device, the saved settings are still offline available.

A lot of devices support current location access. Smartphones calculate the current location by getting data from the built-in Assisted GPS. This is a combination of GPS-Position, W-LAN-information and the currently used network provider location.

The current location data together with the local saved data, will create enough scenarios and ideas for Web apps. For the development of mobile Web applications

various frameworks can be used. The frameworks are currently limited to Webkit- based browsers. Blackberry smartphones will be supported from Version 6, Windows Phones won’t be supported at all (but in time of typing this, Internet Explorer 9 will be launched soon for the mobile Windows Phone platform). The most important frameworks are jQTouch and Sencha Touch, both frameworks offer different development models. Also jQuery Mobile makes a good impress. It evolved from the JavaScript library, but the library is still in its alpha stage. ^{5 6 7}

3.5 The Smashing Book #2 - Designing Mobile User Experiences, 2011

3.6 t3n Magazin Nr. 22, 12/2010 - 02/2011

3.7 http://www.wsol.com/White_Board/Topics/Design_Advice/

Mobile_Web_Site_Design__What_You_Should_Know/ – Dennis Kardys, User Experience Designer at WSOL, 11/2009

/3 MOBILE WEB APP FRAMEWORKS

Responsive Web Design’ is way cool, but I rarely want to serve the same content to devices with different sized screens. It ignores context.

Jeff croft

Responsive web design is the

approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Responsive web design consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

When the users switches from device or screen resolution, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need to design and develop a different design for each new gadget on the market.

Why should we create a custom web design for each group of users? Web

design should automatically adjust. It should not require various custom-made solutions for each category of user.

Responsive web design requires a more abstract way of thinking. We use fluid layouts, media queries and scripts that can reformat web pages and mark-up effortlessly or automatically.

More Than Fluid and Flexible

But responsive web design is not only about adjustable screen resolutions and automatically scalable images, but rather about a whole new way of thinking about design.

Responsive Web design is not only about adjustable screen resolutions and automatically resizable images

Kayla Knight

With more devices come more screen resolutions, definitions and orientations.

New devices with new screen sizes are being developed every day. Each of these devices may vary from screen resolution, functionality and even colour. Smartphones can also switch from portrait to landscape

mode, when the user rotates his device.

How to design for these situations? And more complicate, what if a user switches from orientation while loading a new page?

It’s possible to design for various major screen resolution groups, and design for each of them and make them as flexible as necessary. But that can be a huge job which drives you crazy between all those different programming- and style sheets.

So, how can we design for all those brain cracking situations?

Flexible Everything

A few years ago, flexible layouts were almost a luxury for websites. The only things that were flexible in a design were the layout columns and text. Images could break down the whole layout when start to test the flexible layout. So, they were not really flexible. They couldn’t adjust from a large computer screen to a small netbook screen.

/4 RESPONSIVE WEB DESIGN