The Mobile Learning Lab: Designing for Mobile.
•
2 likes•553 views
Director of UX at Kobo, James Wu, presented 'Designing for Mobile' at The Mobile Learning Lab on August 7th in downtown Toronto. The talk focused on user experience on mobile devices.
More Related Content
Similar to The Mobile Learning Lab: Designing for Mobile.
Similar to The Mobile Learning Lab: Designing for Mobile. (20)
Recently uploaded
Recently uploaded (20)
The Mobile Learning Lab: Designing for Mobile.
- 1. Designing for Mobile Mobile Learning Lab, 2013 James Wu, Kobo
- 2. Screen real estate Hardware variety Touch UIs Context of use User expectations User testing
- 4. iPad 3 9.5” 10.1” Transformer Prime 5.3” Note 2 7” Nexus 7
- 5. iPad 3 9.5” 10.1” Transformer Prime 5.3” Note 2 7” Nexus 7 1280x800 2048x1536 1280x800 1280x720
- 6. 10.1” Transformer Prime 1280x800 iPad 3 9.5” 2048x1536 7” Nexus 7 1280x800 5.3” 1280x720 Note 2
- 9. Download 150px 50px 7 9.5 5.3 10.1 Nexus 7 iPad 3 Samsung Note 2 Transformer 1280x800 2048x153 6 1280x720 1280x800 215 269 277 149 Model Diagonal Resolution PP 5.9 x 17.7 mm 4.7 x 14.1 mm 4.5 x 13.7 mm 8.5 x 25.5 mm Actual size 169% 102% 100% 351% Relative size
- 10. Platform Toolset
- 11. Clock speed Dual core RAM GPU Wifi Bluetooth LTE Cameras ALSNFC SD Card GPS Accelerometer
- 14. Touch UIs
- 15. You can touch it. Or You can see it. But you can’t do both.
- 16. Taps Swipes Pinch/Expand Drag Long press Rotate Shake Sequences
- 17. Context of Use
- 21. User Testing
- 23. Thanks!
Editor's Notes
- A little about me.A little about where this talk came from, and why I think it interesting. Reading anywhere, challenge of supporting multiple platforms
- ----- Meeting Notes (13-08-07 19:07) -----Probably the biggest and most obvious thing about the switch to mobile is the size of the screen you're designing for.
- First, let’s talk about screen sizeA typical monitor might be anywhere from 22 to 27” in diagonal measurement, and mobile devices are coming out in all shapes and sizes.Smart phones are ranging from 3.2 for the new Blackberry storm, to 3.7 for larger Android devices, with the iphone in the mid range at around 3.5Tablets that I’m seeing are coalescing around 7”, but iPad being the biggest is at about 9.7”At CES this year, I saw 13 and 18” tablets!So even a small monitor of 22” (201 sq in) has about 3500% more screen real estate than an iPhone (5.76 sq in) and about 430 % more realestate than iPad (46.5 sq in). So you have less space, means less stuff, means more effort must be made for task analysis and prioritization. You won’t fit everything your product manager wants on the screen.
- As many of you may have heard, it’s not all about size.screen resolution is another characteristic.Not just that it is less than a monitor. In many ways, especially for tablets, the relative resolution compared to a monitor really doesn’t have that big an impact.It’s the variety that must be considered when designing for mobile. With iPhone, iPad it isnt to bad – they are all the same. But at Kobo we want to try and provide a consistent ‘Kobo’ experience and architecure across all the platforms we support, so the variation becomes a tremendous challengeWe can’t use the same architecture and layout on iPad as we do on Samsung tab because of the resolution and size differences.But Android devices vary tremendously, so coming up with something that works well with a wide variety of screen resolutions, or understanding how android manages automatic scaling between device profiles is very important.And since I first gave a version of this talk (from which I deftly stole this slide rather than recreate its’ fantastic animations), sizes and resolutions have only grown
- The next biggie is orientation. If screen size and resoltion variations across platform were not enough, you now have to consider the orientation that your device may be held in.With the twist of the hand, the entire canvas on which your UI is drawn changes, and you have to account for it. In some cases it is easier. Depending on the aspect ratio (yet another thing to consider), you may get a reasonable canvans in both orientations. Howvere many new tablets, and most phones have a widescreen aspect ratio, which means the nature of the canvas in portrait vs landscape is very very different.
- Just when you thought you had it al lworked out across physical screen size, resolution , orentation you remember that very often some portion of screen is consumed by a softkeyboard.How much depends on the platform, device orientation etc. but you need to design for itAKA where the hell is the fold gonna be?
- The last one I’ll take about in terms of real estate is paltform variations, specifically Android which is making up almost 80% of the smartphone market these days.Android devices vary tremendously, they can be tablets or phones, there are a wife variety of resolutions, screen sizes and aspect ratios that are supported.And obviously, your dev team and PM team won’t want to design and build to each variation.so coming up with something that works well with a wide variety of screen resolutions, or understanding how android manages automatic scaling between device profiles is very important.HDPI, MDPI, LDPI, Platform independent pixelsTablets that can run the as phones, phones that can run as tablets.
- Just as an example of the impact that these variations can have, let’s walk through an exercise on pixel densityOne of the more interesting challenges with mobile hardware has to do with pixel density, which is really the combination of screen size, and resolution.Pixel density is expressed in terms of pixels per inch. So more dense displays show more pixels in less spaceLet’s take a look as some common onesNow lets consider a simple button, and think about what happens to that same graphical asset as it is rendered on multiple devices.Relative size.Don’t forget that these issues apply not only the graphical assets, but the spaces between graphical assets, which can lead to hotspots on a device where things are too close together.Gets worse – if you do the calculations on some devices, and look at the screen dimensions vs the claimed resolution, you find that some have non square pixels!
- Variations in the types of tools you have at your disposal across different platforms.The most obvious characteristic of the hardware is the raw performance, which can vary tremendously between devices. TAPMobile apps are becoming increasingly complex. Despite the fact that an iphone probably has more computation power than the space shuttle, these apps are taxing on the hardware.So, they can load slowly, or taps don’t register while computation is being performed, or screens won’t scroll, or the device runs out of memory when loading large lists, or it can’t use both Bluetooth and wifi at the same time.Tremendous mismatch in the hardware available from various manufacturers means it is difficult to provide consistent experiences across device without resorting to the lowest common denominator
- Removable SD StorageAnother issue is removable storage. Most devices these days use SD cards for expandable storage, and many of them support hotswapping.This means that many apps install their core foot print on internal memory which is stable and faster, and place their database on the SD card. Now we need to think about what happens if the user removes it. What it they format it? What if they get a new one? What if we run out of space?Internal memory, removable, expandable storage. What happens if it is removed? What if it is replaced?
- Last thing I want to talk about with hardware is the just the wide variet of other interaction mechanisms you run into. I’ve focused on touch screen, but there are trackballs, hardkeyboards and touch sensitive strips. If you are designing for Blackberry Torch, you can hardleyingnore the track ball as a primary input mechanism.Same for Palm Pre or any phone with a hard keybaord.Track balls, slide out keyboards, offscreen touch areas.But increasingly, there are even more interesting kinds of interaction coming down the pipelineSpeech, but also sound and radar basedFacial recognition
- Fundamental property of direct manipulations Uis!
- Fundamental property of direct manipulations Uis!
- In mobile, there is the ever present need to keep Uis simple – there is not enough space to add every feature you might dream of.Not every primary function necessarily deserves physical representation on the UI.Ever growing gestural language, but no standards.Apple is leading by example and emerging as defactoTap, double tap, triple tap, swipe, 2 finger swipe, 3 finger swipe, pinch, expandWhere do you stop? Crunch/stretch, scrunch, shake, figure 8, How do you keep them discoverable, learnable. How can you provide affordances for gestures?When is each appropraite, and when it too much?We experiment with first time experience instructional overlays, with ghosted UI elements that hint at the gesture then disappear after first time use. None are perfect approaches, and none are Another issue, which could be a presenation all unto itself – how do you express gestures in wireframes?
- First and formost – Mobile - Not plugged in, so on battery which means power consumption is an issue. You can just cruch away without eating battery. Nickel storyAlso, people pay through the nose for mobile connectivity, so bandwidth is not just about reposnsiveness but cost. You can’t use someones data plan without considering the cost .Short covers vsePubs.Untethered – connections are low speed (relatively) and unreliableDesigning for intermittent connectivity. What happens if I log in, then the connection dies. What if they go into airplane mode while dowloading? Android storyDesigning for offline scenarios- what happens if they open your app while on the airplaneUnpredictable context – we are constantly thinking about subway stations, and airplane lounges and bathroom stalls as places people use our app.Changes in ambient noise, lighting. You don’t have the luxury of assuming a quite office, desktop environment.User attention – similarly, you don’t the the luxury of assuming you have your user’s undivided attention. task switching, backgrounding of apps, phones ring, emails come in. Talk about hiding the clock in the reading experience.I think the most important thing about context is that understanding it can help not only create a more usable app, it can help define new experiences.
- Few formal standards, but strong expectations across platformsWhat is expected in iPhone may be unacceptable in Android.Pinch and zoomBack buttons
- Lots of options these days, certainly many more than when I first started doing IA for mobile devices all of 3 years agoUserTesting.comMagiTest.comNone of these quite have the intimacy, nor the impact of watching users struggle live in person.Also, none seem to have the breadth or refinement of features that have existed with the old standby – Morae – for years.