Issue 6. Designing for Mobile. An Appnovation Digital ebook. Designing for Mobile P.1.

Transcription

1 Issue 6 Designing for Mobile An Appnovation Digital ebook Designing for Mobile P.1

2 Thank you for downloading our E-Book: Designing for Mobile We hope you learn a lot from our free resource. If you have any questions, please do not hesitate to contact us online or in person at any of our offices around the world. We look forward to hearing from you soon! The information in this E-Book is transcribed by Appnovation Technologies from Designing for Mobile webinar presented by Adrian Jones - Senior Business Analyst, and Erico Nascimento - Web Designer. For more information, visit Appnovation Technologies P.2

3 Table of Contents So Many Screens P.5 User Experience P.9 Technical Strategies P.17 Responsive Framework P.19 P.3

4 A few words We are going to focus on strategies for designing websites for mobile screens. Why is that? Because if you are designing an ios app for the iphone 5, for example, you already know exactly what your screen resolution is. And as far as UX goes, Apple already publishes a very comprehensive ios Human Interface Guidelines document, available for free on the web: Just Google ios usability. Designing websites for mobile, where the website needs to work properly across different mobile devices and their mobile browsers, has its own unique and non-trivial challenges. Topics Covered Screen Sizes Usability For Mobile Some Do s and Don ts for Mobile UX Playtest! Technical Strategies Responsive Design Mobile First 1 4 P.4

5 So Many Screens The Multi-Dimensional Universe How many different screen sizes do you think are there out there right now for mobile devices? ? Back in 2009 we had the iphone 3GS so no problem, we just needed a desktop version of our website, probably built to the 960 grid, and one more version for iphone s 480-by-320 display. If you really wanted to get adventurous you could have a Blackberry optimized version as well. P.5

6 HP Veer Palm Pre 2 Motorola Droid 2 HTC EVO-4G Samsung Galaxy Apple ipad 2 Motorola Xoom Blackberry Torch Apple iphone 4 Samsung Captivate Samsung Infuse 4G A size for every taste iphone 4 = at 128ppi (retina) iphone 5 = at 128ppi ipad mini = 1024x768 at 64ppi ipad 2 = 1024x768 at 52ppi ipad Retina = 2048x1536 at 104ppi Samsung Galaxy = Try 320x480, 480x800, 600x1024, 720x1280, or 800x1280 at a whole bunch of different ppi.w Motorola Droid 3 = 960x540 at 110ppi Motorola Droid 4 = 960x540 at 110ppi Motorola Droid Razr HD = 1280x720 at 123ppi Then there is LG, HTC, Blackberry, and Nokia mobile devices Needless to say the list of manufacturers is long, and growing. We haven t even touched on laptop and smart TV screen sizes P.6

7 Just kidding. But let s face it. This is kind of hard. And unless you are Google, IBM or Apple, your company probably does not have the budget to test on every single device out there or every time a new one is released. P.7

8 2 So what is the real answer? Well, don t kill me, but there is not one. There is no magic recipe that is going to solve all your problems. The landscape is just too complex right now, and with the internet of everyday things in our future, I don t see it becoming any less complex. What you can do though is adopt a set of strategies, both from a user experience perspective and a technical point of view. P.8

9 User Experience User Experience Design There s million of apps out there for any major device, and it takes only a few seconds to install most of them, and even less to delete them. And if you delete an app, what are the chances that you are going to go to the effort of installing it again in the future, even if it gets improved? Well if there are millions of apps out there, there are bazillions of websites out there. And it s even easier to navigate to a site, and leave it just as fast. So for our purposes, I will say don t give your users a reason to leave your site. Because if they leave frustrated or dissatisfied, chances are they won t come back. Ever. That s just the truth. There are just too many alternative ways for users to get what they want in this global economy. You might say, Why should I spend all that effort on a good mobile user experience when everyone still uses desktops and laptops to browse the internet? P.9

10 Quick Facts A sale coming from mobile phones on ebay comes every 2 seconds Smartphone and Tablet sales have outpaced Desktop sales 28% of internet usage comes from mobile phones 38% of UK tablet owners spend more of their time on their device than watching TV P.10

11 J The Do's... Easy to navigate with touch gestures Social - Content users like can be easily shared - Integration with Facebook, Twitter, Tumblr, etc. Entertaining or Informative Polished and Professional Emotional - People project their emotions onto their digital devices Forgiving - Elements should be large enough for a users fingers L The Don'ts... Unreliable Hard to use Slow Does not respect conventions (Apple and Android have different standards) Does not work on the move P.11

12 Those who came before us Jonathan Kohl is known as a thought leader in mobile testing, and in his research, he identified those five, high-level "don'ts" when it comes to mobile UX. The last one refers to an app or website not working in the most logical places where you would use them. So an airline website that runs slowly in an airport due to poor reception, or a geo-location service that needs Wi-Fi in order to function. Don't assume anything Be careful when applying user research what is the context of that research? Do your own research into your organization s marketing and sales claims. Always remember this mantra: I am not the user, and the user is not me. Be careful when applying user research based on your site s desktop version to that site s mobile version. People use sites in different ways when they are browsing on their desktop at work versus on the bus on the way to work. For example, on the way to work I may just want to be able to read a news site s top stories on my iphone, but when at work, where there s high-speed internet, I may want to see all the pictures and videos associated with the stories as well. Do your own research into your organization s marketing and sales claims. Don t just take their word for it. Sorry. They just can t be trusted. Always remember this mantra: I am not the user, and the user is not me. There s no place for hubris in user-centered design. Be lean! It may seem obvious, but always remember that mobile devices are no where near as powerful as your desktop computer, unless of course your desktop was made in In which case you may have bigger problems. So think about what content is most important. One strategy is to design mobile first. This forces you to think of the most important content and develop a strong hierarchy. Then as you move up in screen size you can bring in more elements. Adobe Flash has always been known as a bit of a resource hog, but it wasn t a huge issue on desktop browsers with lots of RAM and CPU power. So when Steve Jobs turned the Flash community on its head by announcing that ios would not support Flash, everyone s reaction was that Steve was making a brazen marketing decision. But the truth is, most people will tell you that Flash does not run very well even on the mobile devices that do support it. Mobile devices are becoming more powerful every day, but we still need to be respectful of their limitations. So don t be a pig! Do not be resource demanding. Go for clean, simple, minimalist design for your mobile designs. Maybe go for the strategy coined by Luke Wroblewski called mobile first. P.12

13 P.13

14 Nice to touch Smartphones and tablets use gestures instead of a mouse. It s a whole new language. And thankfully it s one of the easiest languages you ll ever need to learn. Just try putting an ipad into the hands of a 6 year old and watch how fast they pick it up. But as great as it is to be able to navigate using pinches and swipes, it does present some constraints to your user interface. For example, there are no hover states on touch devices. So no fancy tooltips on mouse over, no expansive drop-down menus when you hover over the navigation, and no rollover button By Stephanie Jagiello states. Now there is some forgiveness. Most mobile operating systems will trigger a hover over effect on a button when you tap it, but only provided that the button doesn t also have a link attached to it. So a navigation bar where all the parent categories act only as rollovers, and you re okay. Attach a link to these as well and you ll get a brief flash of the rollover state before the browser follows the link. P.14

15 Nice to look at Distill a website down to its most critical functions and content Lay things out strategically Okay designers, you can still make it pretty Antony Ribot makes a good point in his presentation, Mobile UX: The Intricacies of Designing For Mobile Devices, when he says, Mobile is not about making things smaller. It s about distilling the site down to the most critical functions and content, and then laying them out strategically in the available screen space. P.15

16 3 Play-Test! We like the term play-testing because for some reason people tend to associate the word testing with boredom, tedium and repetition. But testing can actually be one of the most fun and informative parts of a project. To turn testing into play-testing though, you have to incorporate user research and solicit user feedback. You need to get validation from real users. A great way to conduct user research is to immerse yourself in the environments in which your application will be used. So go hang out where your target audience hangs out. If possible, do the things they do, go where they go. If you are building a mobile site for a Crossfit gym, go sign up at a gym for a week and participate. Talk to people. See what kinds of things they would like to get out of the gym s mobile website. And maybe even lose a few pounds while you re at it! See who says web development has to be a desk job. P.16

17 Technical Strategies Native Costly Only one OS at a time Not future friendly Phonegap Not as fast/smooth as native Dedicated Theme/Site May not be convertible to mobile User goals for mobile are very different from desktop Responsive Fluid Grid Fluid Images Not isolating any one state Maintains proportions relative to the viewport All percentage based P.17

18 4 Adaptive Deals with a set number of tiers (desktop, tablet, mobile) Media Queries Mixed Techniques Responsive + Adaptive Adaptive/Adaptive + Dedicated Site/Theme Responsive + Adaptive + Dedicated Site/Theme P.18

19 Responsive Frameworks Twitter Bootstrap Large community for support Easy to use markup Succinct syntax Columns within columns Loaded with element styles for easy prototyping Foundation Nice Typography Loaded with features (flexible sliders and mobile modals) Simple to use grid and markup. Columns within columns. Integration with Drupal can be tricky More Verbose Syntax Zen Theme Proven track record Large Community backing it up Uses Sass Mobile First grid Very bare bones P.19

20 Omega Theme Large community Uses Sass Lots of overhead New version to be lighter but no upgrade path Steep learning curve Adaptive Theme Large community Powerful framework Premium themes Bit of a learning curve Spark Initiative Responsive Design builder Other cool features like in-line editing Still under development Thank you Considering a or mobile development project and want to ensure your app or mobile site s users, visitors and customers are going to have the experience you want them to have? Give us a chance to tell you how we can make that happen. Contact us today at sales@appnovation.com. P.20

21 Thank you again for downloading this E-Book. If you have any questions about designing for mobile, or if you need technical support, development, or design services, contact us today at We look forward to hearing from you soon! Proudly delivering quality projects to companies, organizations and government entities around the world. Here are just a few of the names you might recognize: P.21