Smart / Responsive Mobile Design
•Als PPTX, PDF herunterladen•
0 gefällt mir•651 views
The document discusses best practices for mobile design. It recommends defining the vision for who the design is targeting and what needs it will meet. Thoroughly research the target audience by understanding their devices, contexts of use, and actual wants. Iteratively test design prototypes, refine based on feedback, and retest until meeting user needs. Key design considerations include accommodating distraction, avoiding excess features, leveraging interface hotspots, and accounting for imprecise touchscreen interaction. Responsive design using flexible grids and media is advocated to create a single codebase that adapts content for different devices.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Ähnlich wie Smart / Responsive Mobile Design
Ähnlich wie Smart / Responsive Mobile Design (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Smart / Responsive Mobile Design
- 1. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Smart / Responsive Mobile Design BarCamp Memphis, 2011
- 2. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Lokion is a proven, nimble team of experts crafting digital solutions that work for real people. @lokion passion :: purpose :: practicality
- 3. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 4. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 5. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. ???
- 6. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Focus First 1.Define the vision. 2.Do your homework. 3.Test. Refine. Retest.
- 7. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Define the Vision • WHO are we designing for? • WHICH devices are they using? • WHERE and WHEN do they use it? • WHAT do THEY need / want / expect? • WHAT do WE need / want / expect? • HOW will this improve their experience? • WHY are we designing this mobile site?
- 8. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. “You can’t tell how well something will work until it’s sitting in your sweaty palm.” ~Tom Hume
- 9. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Do Your Homework: Mobile Empathy
- 10. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Give users what they actually want, not what they say they want. “But what I really want is…”
- 11. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Do Your Homework: Audience Research Joe Sarah Helen Jake Young Cocky Pilot Friendly Flight Attendant PT Ground Service Agent Pragmatic Mechanic Evo Android HTC Inspire she calls iPhone Costco Samsung T939 iPhone with Otterbox
- 12. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. “A lot of times, people don't know what they want until you show it to them." ~Steve Jobs, BusinessWeek, May 25 1998
- 13. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Test. Refine. Retest.
- 14. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Mobile Design Quick Tips 1.Design for distraction. 2.Avoid featuritus. 3.Leverage hot zones. 4.Know fat finger math.
- 15. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 16. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 17. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Hot Zones
- 18. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Fat Finger Math ¼ inch
- 19. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 20. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 21. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Responsive Design Single set of front end code for all devices.
- 22. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. What is responsive design?
- 23. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. What is responsive design?
- 24. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Works great in modern smart phones http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
- 25. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. But what about everyone else? http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
- 26. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Top Down vs. Bottom Up Approach
- 27. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Recap • Define the vision. • Do your homework. • Test. Refine. Retest. • Design for distraction. • Avoid featuritus. • Leverage hot zones. • Know fat finger math. • Responsive design • Flexible grid • Percentages and Simple Math • Flexible images and media • Top down vs. bottom up • Resources
- 28. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission. Resources / Contact • A User-Centered Approach To Web Design For Mobile Devices • Designing for Mobiles: Users & Context from Niek Dekker on Vimeo. • Responsive Web Design by Ethan Marcott • Responsive Design How To & Gallery • Mobile First by http://www.lukew.com • Yiibu’s proof of concept site based on Mobile First • iPhone Human Interface Guidelines • Windows Phone UI Design and Interaction Guide (PDF) • Ubuntu Designing for Finger Uis • DeviceAtlas • Opera’s State of the Mobile Web • Google keyword tool in AdWords • Less responsive design framework • Frameless responsive design framework • Tim Thumb image scaling • Zebra Image media scaling • Imagine media scaling library Give us a shout! www.lokion.com 901.591.1614
- 29. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
- 30. Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Hinweis der Redaktion
- Designing for touch interactions on an ever-growing array of devices and screen sizes can be daunting. We will discuss efficient ways to focus mobile features, tips for designing for touch and approaches to implement a “responsive” design that adapts to any screen size.
- We are passionate user experience advocates, dedicated problem solvers, flexible teammates and just downright FUN people.
- The last couple of years have produced an explosion of mobile devices that can access the Web which has really rearranged our priorities as interactive designers. 5.6 billion smartphones worldwide, but only 1.5 billion tv’s, 1.3 billion LAN phones, 1 billion PCs & .8 billion cars (Mobile Institute) 60%+ of the world’s population can surf the web on their phone (source: dotMobi) 2000% growth rate in mobile sites in the last year, WAY faster than desktop Internet growth (source: dotMobi) Everybody’s doing it. Folks come to us almost daily asking us to make them an iPhone app. “There’s an app for that” and we want one too! OR they ask us to make their web site “go mobile.” So, we ask which devices they want to target and they say, “Well, ALL of them, of course!” By the end of this year, Netflix.com will work well on 300 different devices. Do we really need 300+ different designs? How on earth do we do THAT efficiently?... It’s overwhelming to think about sometimes.
- Some days… it seems like it might be awfully nice to just go back to this kind of phone.
- So, we have started to ask a lot more questions when we start to design for mobile. What we want to do is begin with the end in mind so we can design efficiently rather than just throwing things out there. There are plenty of useless apps and crappy mobile sites. We want to good ones that work for real people. So, where do we start? I’m going to cover some of the ways we try to get our mobile designs off to a good start from the beginning as well as some general tips for mobile design, then quickly introduce the responsive design approach that is one way that is emerging to efficiently design for the growing spectrum of devices and screens on which our sites might be used.
- We highly recommend that any design begin with the end in mind. To do that, you might have to do a bit of research on the front end. And it’s always good to reality check with real people through testing.
- One way to start to get a fell for the context of usage for your mobile site is to sketch personas or user stories that represent your potential audiences and then literally “try on” their various mobile situations or challenges in role playing (ex: single-handed usage, poor eyesight, Lee Press-on Nails, etc.).
- Keyword research (like you would do for SEO) is another way to inform the priorities for your mobile site. It gets you one step closer to what real people are doing with their mobile devices. A quick glance at your existing desktop website analytics will tell you the percentage of mobile visitors, along with the types of devices and operating systems they use to access your full desktop site. Then dig a bit deeper to understand WHY these users visit your site using a mobile device — what they are trying to do, and the content and functionality they are using. What’s their STORY? Where are they? What else is going on? Are they stuck on the highway or standing in line at the movies? For example, let’s say you sell car insurance, and you want to see how users are interacting with that type of content on mobile devices versus desktop devices. You could look at your site logs and see what mobile users are already trying to do. Or you could use the search filter in Google keyword tool in AdWords to take a look at what folks on various mobile devices are more broadly searching for related to insurance. Seeing phrases like “tow,” “tow truck,” “tow service” and “roadside assistance” might lead you to put these at the top of your mobile site nav instead of “find an agent” or “get a rate quote.” A bit of investigating on the front end can really save a lot of wasted time designing stuff people don’t even want when they use your site mobilely. Of course, whenever possible, it’s great to actually get out and observe what your potential audiences are doing mobilely first-hand!
- In support of a regional airline’s intranet redesign, Lokion spent several days “out on the tarmac” observing and interviewing employees in various roles. We explored work-related technology usage, preferences and behaviors – uncovering a much higher than expected likelihood to do work-related computing on mobile devices. We learned that for MOST their mobile devices are their primary or ONLY Web access, which is a problem if your web site or crucial chunks of it don’t work mobilely. We especially enjoyed meeting the flight attendant who kept referring to her “iPhone” & “iPad” which when shown turned out to be Androids (like Kleenux for tissues), seeing the dusty old untouched desktops in the corners of the ground service break room and mechanical hangar and watching a mechanical engineer who claimed not to be a “computer person” use his iPhone to take a picture of a plane’s cracked windshield to email to his boss.
- As we get to know the real people we’re designing for and understand the multi-device channel-hopping that is a part of pretty much all of our lives at this point, it becomes essential that we test our designs through the relevant devices. This is where the rubber hits the road, right? Can real people use it… when and how it’s convenient for them. This is the sled we designed to use when we conduct and record usability testing on mobile devices and an example of what the output looks like when you record a mobile usability test session. We run our session recordings through Morea Analyzer to get a collective picture of success / failure ratios, ease of use scores, time-on-task, etc….. Comparing these metrics across devices or with the standard Web version provides a more holistic picture of potential usage so we can make smarter decisions about how to refine our designs.
- Design for Distraction How many of you use the web on your phone while walking down the street? How ‘bout while driving? We’re splitting our attention, trying to look up information & absorb it quickly while also glancing about trying to make sure we don’t bump into a lamp post or crash the car. Designing for context, distraction and multitasking makes focusing your mobile UI on critical immediate tasks imperative. And you’ve also got to take into account the physical environment and conditions of usage, including motion, lighting conditions and poor connectivity combined with users’ bodily physical attributes and challenges such as less-than-perfect eyesight, imperfect manual dexterity, big fingers, Lee Press-on Nails, etc.
- Avoid Featuritus This is the World's Largest Swiss Army Knife / "King of All Gadgets“ It is Guinness World Record holder for "the most multifunctional penknife" 85 tools / 100+ uses / almost 3lbs / 8.75-inches You can get one at ThinkGeek (http://www.thinkgeek.com/gadgets/tools/8b97/), but who wants to carry THAT around in your pocket?! It’s good to be prepared for anything, but DANG!!! It’s a metaphor for what happens to a lot of sites over time as new features get tacked on. But designing for mobile requires that we step back from that featuritus inertia. It’s a much less forgiving platform. For years, we have been increasing the minimum screen resolution we design for, but a couple of year ago we had to reverse that and figure out how to design for all these teeny-tiny mobile screens which are like 80% smaller. How do you handle that? We simply can’t squeeze everything into that tiny space. We try to see this challenge as an opportunity to be more focused on the right tool for the right device at the right moment. Think of it as designing for a spectrum of screens – all the way from dumb phones to desktops. Start with critical mobile content & functionality on the smallest screen & scale upwards adding bells and whistles as appropriate for those luxurious stationary big screens. Ask yourself: Is this critical information or functionality users need right now? What content (if any) would be interesting to users of a mobile site that wouldn’t necessarily appeal to a stationary user on a desktop or laptop? Simplifying complex interactions is hard! You won’t always get it right the first time. Sketch it out!... Test it with real people…. Go back to the drawing board if you have to.
- Leverage Hot Zones Remember you are designing for a PHYSICAL OBJECT. How do you hold your mobile device? (everybody pick yours up) Maybe you hold it in one hand & tap with the other. Or maybe you are more of a one-handed thumb-touch person. Or maybe you cradle it in two hands and tap with your thumbs (especially when you’re on your tablet). Or maybe you do all of the above depending on the situation & what else you’re trying to do at the same time…. Oh, and don’t forget about orientation! However you hold and use your mobile device, there are areas of the screen that are easier to reach than others. And these target spots or “hot zones” are different than they are on a laptop or desktop. On an iPhone, the general pattern is to put content at the top and controls at bottom. You want to put the most frequently used information near the top, where it is most visible and easy to reach. Androids, on the other hand, have native controls at the bottom so you don’t want to be double-stacking…. So, if you’re designing for BOTH, you will need to compromise. Tablets are used differently. Your more likely to be seated or lying down on the couch or in bed, maybe even resting the device on your belly (and some bellies might compete for room with controls at the bottom). You’re probably not going to be holding it from the bottom. Maybe you hold it from the top third, with two hands. So, you’ll want to avoid controls at top center ‘cause using them means your hands cover content area below. Top left and right corners are preferable in portrait. In landscape, perhaps place controls on the side near the top.
- Fat Finger Math Another challenge in mobile design is that people interact with touch-based user interfaces with their fingers and fingers come in different shapes and sizes. In fact, most users prefer to use the pad of their finger – which is slightly narrower -- rather than the very tip. So you’ve got to design your user interface controls big enough to avoid frustrating users. Apple’s tried-and-true optimal target size is ¼ inch Microsoft suggests a touch target size of 9mm with 2mm spacing between elements with visual size of UI controls 60-100% of touch target size Nokia suggests that touchable interface elements should be no smaller than 1 cm × 1 cm with minimum target size = 7 mm x 7 mm with 1 mm gaps for fingers or 8 mm x 8 mm with 2 mm gaps for thumbs plus a 5 mm line spacing for lists such as navigation menus
- Responsive sites use a single set of CSS and HTML to flexibly adapt layout and presentation to the viewport size of any device. Advanced web browsers on smart phones and mobile devices allow us to serve code that’s simpler and smarter. Percentage-based measurements give us flexibility. We can now scale content and media based on the browser size. A little simple math gives us a lot of options so a site can render well at any size.
- This is a Quick site that one of our designers made in a an hour or so for a fundraiser for his wife who recently ran a marathon to raise money for breastcancer research. Since he knew a lot of folks would be viewing it on their mobile devices, it needed to look good and work well on any device but do so with a minimum of time and effort.
- Not only does layout change but UI elements can be hidden and shown to adapt for a device as well.
- Works very well on expensive phones. The user gets what the user pays for.
- But its not fair to all users. (or mostly mobile opera users). Some mobile browsers still have some catching up to do.
- What is the best practice currently for planning a responsive site? The top down approach Starts with a fill desktop browser and then takes elements away for the smaller devices. The bottom up approach is the exact opposite. It plans for the most basic devices at the smallest size and adds content, media, and layout for the larger devices. This method allows the worst case browsers to get the simplest version of the site.
- Any questions?