Designing for Mobile. Jonathan Wallace

Transcription

1 Designing for Mobile Jonathan Wallace

2

3

4 Recommended Further Reading

5 Recommended Reading Web Hybrid Mobile App Dev Webinar.pdf for mobile 7 guidelines for startups to follow/

6 Recommended Reading Brian Fling Designing Mobile Experiences mobile experiences?src=related_normal&rel= tips for designing mobile websites/ the fight gets technical mobile apps vs mobile sites marketing strategy

7

8 What Is Good Design? Good design should be innovative. Good design should make a product useful. Good design is aesthetic design. Good design will make a product understandable. Good design is honest. Good design is unobtrusive. Good design is long lived. Good design is consistent in every detail. Last but not least, good design is as little design as possible. Dieter Rams, Braun

9 It s Hard To Design For All!

10 It s Hard To Design For All!

11 It s Hard To Design For All!

12 It s Hard To Design For All!

13 Is it the Death of the Desktop?

14 And Don t Forget This!

15 Lecture Overview A Few Definitions: Generation Y and Generation Z What is Mobile? The PCD The Carry Principle Elements of Mobile Design Bluetooth Marketing The Web versus Apps Debate

16 Generation Y and Generation Z 97% own a computer 94% own a mobile phone 76% use Instant Messaging 69% use Facebook 56% own an ipod

17 Generation Y and Generation Z Digital Natives born in the modern digital age. Technology is infused at birth.

18 Generation Y and Generation Z CHILDWISE Monitor Report 2011/2012

19 Generation Y and Generation Z

20 Generation Y and Generation Z

21 Generation Y and Generation Z

22 What Is Mobile? The PCD Mobile can mean a lot of things to different groups of users. According to Barbara Ballard in Designing the Mobile User Experience : Of particular importance to mobile users are a special category of devices, namely Personal Communication Devices or PCDs

23 What Is Mobile? The PCD A PCD is: Personal: device generally belongs to only one person, is personally identifiable, and has a messaging address and on going service. Communicative: device can send and receive messages of various forms and connect with the network in various ways. Handheld: device is portable. It can be operated with a single hand, even if two hands or a hand and a surface are more convenient. Wakeable: device can be awakened quickly either by the user or the network.

24 The Carry Principle According to Barbara Ballard: the fundamental distinction between mobile targeted design and design targeted for other platforms is The Carry Principle the user typically carries the device all the time.

25 The Carry Principle The Carry Principle has several implications on the device: Form Factor: devices are small, battery powered, have some wireless connectivity and have small keyboards and screens (if present). Features: Any information or entertainment features that might be desirable to have away from a computer or television, including television itself, will eventually get wedged on the PCD Capabilities: The wireless communication, small size and power constraints have made devices have slower connection speeds, slower processors and significantly less memory than current desktop computers.

26 The Carry Principle User Interface: The small screen drives the device usually to a single window interface, so sharing information between applications is not straightforward. Proliferation: A personal, always present device needs to match a user s needs, desires and personality reasonably well. One form, one feature set, one user interface will NOT fit all.

27 The Carry Principle The Carry Principle has also implications for the PCD Users User Availability: The mobile user is more available for communications and application interaction than a computer user simply because the device is always present. Sustained Focus: Because the user is doing so many things, there may not be sustainable time available for the device. Social Behaviour: Always available connections has made from attending meetings through a night out to dinner with friends a modified experience. Coordination across space allows both more and less social behaviour. Alwayson can be obtrusive and how to manage this without damaging your social media rep can be a challenge.

28 Elements of Mobile Design Context Message Look & Feel Layout Colour Type Graphics Different Screen Sizes The Right Device Brian Fling Designing Mobile Experiences mobile experiences?src=related_normal&rel=

29 Context is King

30 Context is King Who are the users? What do you know about them? What type of behaviour can you assume or predict about the users? What is happening? What are the circumstances in which the users will best absorb the content you intend to present? When will they interact? Are they at home and have large amounts of time? Are they at work where they have short periods of time? Will they have idle periods of time while waiting for a train / plane., for example?

31 Context is King Where are the users? Are they in a public space or a private space? Are they inside or outside? Is it day or is It night? Why will they user your app? What value will they gain from your content or services in their present situation? How are they using their mobile device? Is it held in their hand or in their pocket? How are they holding it? Open or closed? Portrait or landscape?

32

33 Message What are you trying to say about your site or application visually? Your message is the overall mental impression you create explicitly through visual design. How someone will react to your design? If you take a step back and look at a design from a distance, what is your impression? Look & Feel Look & Feel is used to describe the appearance As in I want a clean look and feel or I want a usable look and feel. The problem is: as a mobile designer, what does it mean?

34 Layout How the user will visually process the page? The structural and visual components of layout often merged together, creating confusion and making your design more difficult to produce. Colour The most common obstacle when dealing with colour is mobile screens. When complex designs are displayed on different mobile devices, the limited colour depth on one device can cause banding, or unwanted posterisation in the image.

35 Typography How type is rendered on mobile screens: Subpixel based screens A subpixel is the division of each pixel into a red, green and blue (RGB) unit at a microscopic level, enabling for a greater level of antialiasing for each character or glyph. Pixel density or greater pixels per inch (PPI) Pixel density is determined by dividing width of the display area in pixels, by width of the display area in inches. Graphics Use of images that are used to establish or aid a visual experience Graphics can be used to supplement the look and feel, or as content displayed inline with the text Iconography Photos & Images

36 Different Screen Sizes Mobile devices come in all shapes and sizes. Choice is great for consumers, but bad for design. It can be incredibly difficult to create that best possible experience for the plethora of different screen sizes out there.

37 The Right Device The truly skilled designer doesn t create just one product they translate ideas into experiences. The spirit of your design should be able to adapt to multiple devices.

38

39

40 Bluetooth Marketing

41 Augmented Reality on Mobile

42 The Web Versus App Debate

43 The Web Versus App Debate

44 The Web Versus App Debate Native apps are programmed using Objective C on the iphone or using Java (some C, C++) on Android devices. Native apps make use of all the phone s features, such as the mobile phone camera, geolocation, and the user s address book. Native apps do not need to be connected to the internet to be used. A native app is specific to the mobile handset it is run on, since it uses the features of that specific handset. Native apps can be distributed on the phone s marketplace (e.g. Apple Store for iphone or Android Market for likes of HTC and Samsung Handsets).

45 The Web Versus App Debate Web apps run in the phone s browser. This means the app works across all devices, and ensures crossplatform compatibility. The same base code can be used to support all devices, including iphone and Android. However, web apps do not make use of the phone s other features, such as the camera or geolocation. Web apps cannot be deployed to the phone s marketplace.

46 The Web Versus App Debate Hybrid mobile apps are a mix between these two types of mobile applications. Using a development framework, companies can develop cross platform applications that use web technologies (such as HTML, JavaScript and CSS), while still accessing the phone s features. A hybrid app is a native app with embedded HTML. Selected portions of the app are written using web technologies. The web portions can be downloaded from the web, or packaged within the app. This option allows companies to reap all the benefits of native apps while ensuring longevity associated with well established web technologies. The Facebook app is an example of a hybrid app; it is downloaded from the app store and has all the features of a native app, but requires updates from the web to function.

47 Advantages and Disadvantages Native Apps Native apps have better functionality because they use the features of the smartphones, such as the camera phone, the user s address book, geolocation and augmented reality, companies can offer a richer, more immersive experience. Native apps do not need necessarily to be connected to the internet to be used. Since they make use of the phone s functionality, they can work in offline mode when there is no internet connection. However, some apps may require an internet connection, depending on functionality and available data. In terms of distribution, native apps get good visibility with consumers because they are distributed through the phone manufacturer s app store. This also means that they have an in built revenue model, since consumers may have to pay to download the app.

48 Advantages and Disadvantages Native Apps It is also important to consider which platform customers are mostly using. To maximise the number of consumers reached through an application, it is important to create an app for different mobile handsets, to ensure compatibility with the widest range of handsets. The disadvantage of native mobile apps is that it can restrict the number of users that can be reached, if the app is not compatible with all handsets. It also requires additional development time as different apps need to be developed for each type of platform. Third party approval can also be another barrier. As the app will be distributed through the phone s store, companies need to wait for approval before the app is released, and this can be a timeconsuming process. In addition, if the app is not approved, there is usually little, if any feedback on why it was rejected approach taken by ios App Store versus Android Market.

49

50 Advantages and Disadvantages Web Apps Main advantage of a web app is that it is compatible across all platforms and devices. As the application runs in the browser, it is independent of the handset it is run on. This means that the web app has effectively more reach, and that only one app has to be designed for several handsets. Web apps make use of existing web technologies, such as Java and CSS, which means the technical barriers to entry are low. Developers can use their existing skills to develop a web app, whereas native apps may require additional training given that the technologies are newer.

51 Advantages and Disadvantages Web Apps Companies can also make use of mobile search to allow their consumers to find the app. Native apps need to be downloaded in advance to be used, whereas web apps can be found and used simply through a search on the browser. Because the app is not distributed through the phone s store, no third party approval is required before release. The site can be updated in real time and changed without requiring sign off by the mobile provider. There is also some evidence to suggest that browser based mobile applications will grow faster than the app market, which may bode well for a long term strategy.

52

53

54

55

56

57 PhoneGap is an HTML5 app platform that allows the developer to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript

58

59

60

61

62

63

64