Dev learn 2011
•
1 gefällt mir•463 views
These are the slides from my concurrent session "The Magic Touch: Interface Design Best Practices for Touch Screen Devices" at DevLearn 2011 in Las Vegas. Throughout the session I routinely switched to show in-depth live demonstrations and reviews of various apps which are not represented in these slides. If you have any questions or comments, please contact me via email brian (AT) mediakube (DOT) com.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Dev learn 2011
Ähnlich wie Dev learn 2011 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Dev learn 2011
- 1. The Magic Touch Interface Design Best Practices for Touch Screen Devices
- 2. Brian Berg, M.Ed. President MediaKube LLC email: brian@mediakube.com twitter: @mediakube linkedin: mediakube google+: mediakube@gmail.com
- 3. Technology consulting Mobile app development eLearning Creative media
- 4. Technology consulting Mobile app development eLearning Creative media
- 5. Effective communication through innovative technology.
- 6. 20 years experience designing touch-based applications
- 7. 20 years experience designing touch-based applications
- 8. Amiga 2000 Circa 1991
- 9. Sony LaserDisc Player Circa 1991
- 10. Edmark TouchWindow Circa 1991
- 11. Velcro Strips Circa 1991
- 12. Back then, the iPad was only a prop on Star Trek.
- 13. Back then, the iPad was only a prop on Star Trek.
- 14. Today everything has a touchscreen!
- 15. Maybe a bit too personal?
- 17. Camcorders
- 18. Picture Frames
- 19. Cars
- 20. Washing Machines
- 21. What’s next?
- 22. Clearly we must be living in the future!
- 25. Technology is getting more complicated. The audience expects it to be even easier.
- 27. iPhone iPod Touch iPad Android Phones Windows Phone Playbook Galaxy Tab Xoom HP TouchPad B&N Nook Vizio VIA Tablet ASUS PadPhone
- 30. How can you possibly design for them all?!
- 31. How can you possibly design for them all?! Plan well and you shouldn’t have to!
- 32. 1. Always remember to kiss.
- 33. Always remember to kiss. Keep It Simple, Stupid!
- 34. Always remember to kiss. Keep It Simple, Stupid!
- 35. Always remember to kiss. Keep It Simple, Stupid!
- 36. Always remember to kiss. Keep It Simple, Stupid!
- 37. Always remember to kiss. “Simplicity is the ultimate sophistication.” - Leonardo Da Vinci Keep It Simple, Stupid!
- 38. Always remember to kiss. Keep It Simple, Stupid!
- 39. Always remember to kiss. LAW #1: The simplest way to achieve simplicity is Keep It Simple, Stupid! through thoughtful reduction.
- 40. Always remember to kiss. Keep It Simple, Stupid!
- 41. Always remember to kiss. Keep It Simple, Stupid!
- 42. Always remember to kiss. Keep It Simple, Stupid!
- 43. Always remember to kiss. Available time for the user to interact is short.
- 44. Always remember to kiss. Keep it to 5 touches or less.
- 45. Always remember to kiss. If you need a help screen, it’s too complicated.
- 46. Always remember to kiss. If you need a help screen, it’s too complicated.
- 47. Always remember to kiss. If you need a help screen, it’s too complicated.
- 52. 147 choices
- 54. 7 choices
- 57. 127 choices
- 62. 16 choices
- 63. 2. Think Pixar.
- 64. Think Pixar. Story development Know what you want to say. Plan how you want to say it.
- 65. Think Pixar. Storyboarding Draw it all out in detail. Revisions are to be expected and not feared.
- 66. Think Pixar. Eat the dog food Make stuff that you would want to use!
- 67. 3. Don’t paint yourself into a corner.
- 68. Don’t paint yourself into a corner. Don’t think pixels. Pixel counts change with each new device.
- 69. Don’t paint yourself into a corner. Think scalable. Reserved Zones Sliding Panels Horizontal Scrolling Menus
- 70. Don’t paint yourself into a corner. Leave elbow room. Give everything a little more padding. Touch targets need to be easy to hit.
- 71. 4. Interface? What interface?
- 72. Interface? What interface? The best interface is the one you don’t see.
- 73. Interface? What interface? Put content front and center for the learner.
- 74. Interface? What interface? Don’t waste time jumping through hoops.
- 75. SUMMARY 1. Always remember to kiss. 2. Think Pixar. 3. Don’t paint yourself into a corner. 4. Interface? What interface?
- 76. Brian Berg, M.Ed. President MediaKube LLC email: brian@mediakube.com twitter: @mediakube linkedin: mediakube google+: mediakube@gmail.com
Hinweis der Redaktion
- Welcome!\n\n
- \n
- MediaKube has been around for 10 years, and we focus on these four core areas.\n\n
- MediaKube has been around for 10 years, and we focus on these four core areas.\n\n
- MediaKube has been around for 10 years, and we focus on these four core areas.\n\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- I have 20 years experience designing touch applications. I’ve designed solutions for major household name brands.\n\n20 years ago this month I presented a touch screen system at the national NECC conference in Phoenix. It was cutting edge and attracted quite a crowd. People were hesitant to touch the screen.\n
- \n
- \n
- \n
- \n
- \n
- Touchscreens have really revolutionized mobile computing. In fact, when we talk about the term “Personal Computer”, we really can’t talk about it in terms of desktop computers anymore. We interact with our mobile devices in a far more “personal” way.\n
- Touchscreens have really revolutionized mobile computing. In fact, when we talk about the term “Personal Computer”, we really can’t talk about it in terms of desktop computers anymore. We interact with our mobile devices in a far more “personal” way.\n
- \n
- \n
- \n
- \n
- \n
- \n
- Now that we’re living in the future, it seems like we should all be living on easy street when it comes to developing content for these devices.\n
- \n
- Apple has staked their reputation on easy to use devices.\n“Devices that just work” Steve Jobs always says.\nWith iOS 5 and iCloud, Apple is even taking it to the point of not even needing that “personal computer”. You’ll literally take an iPad out of the box and turn it on to start using it.\nIsn’t that what we want? Convenience?\nTV - turn it on and it knows your favorite station. Done.\nMicrowave - Close the door and hit the popcorn button. Done.\nCars - Don’t even have to use keys anymore. Just walk up to the car and it unlocks itself. Push the “Start” button on the dashboard and it starts. Done.\nConvenience.\nHow do we get there? How can we get to that same level of convenience with mLearning?\n\n
- Apple has staked their reputation on easy to use devices.\n“Devices that just work” Steve Jobs always says.\nWith iOS 5 and iCloud, Apple is even taking it to the point of not even needing that “personal computer”. You’ll literally take an iPad out of the box and turn it on to start using it.\nIsn’t that what we want? Convenience?\nTV - turn it on and it knows your favorite station. Done.\nMicrowave - Close the door and hit the popcorn button. Done.\nCars - Don’t even have to use keys anymore. Just walk up to the car and it unlocks itself. Push the “Start” button on the dashboard and it starts. Done.\nConvenience.\nHow do we get there? How can we get to that same level of convenience with mLearning?\n\n
- Tons of mobile touch devices on the market or soon to be on the market.\nWithin each of these products there can be multiple versions of the operating system.\nEach with its own unique set of features.\nDoes your device have two cameras? One camera? No cameras?\nThat feature set can have an impact on your mLearning deployment decisions.\nBut we’re not here to debate hardware. We are sticking to the software.\n
- Not much better under the hood.\n
- By taking the fundamental principles of User Interface Design and User Experience Design, and applying them specifically for mobile devices, we can become skilled at creating designs and experiences that transcend the platform, the screen size, the OS version.\n\nWe’re going to walk through four practical points that you can start thinking about and applying to your work when you walk out this door today.\n
- \n
- When I was getting my masters degree in Educational Technology, my mentor hammered this point. Every feature and design element had to be justified. Otherwise, why was it in there? You have to separate the “nice to have” from the “need to have”. Some software developers tend to get enamored with adding features that they throw things in just because they can.\n
- There may be no other software in history that has suffered from Feature Creep than Microsoft Word. It’s truly amazing how a program designed to type documents can have so many features you didn’t know you needed! Especially Mr. Clippit down there in the corner.\n\n
- First Law of Simplicity states: The simplest way to achieve simplicity is through thoughtful reduction.\n\n“THOUGHTFUL” and “REDUCTION”\n
- First Law of Simplicity states: The simplest way to achieve simplicity is through thoughtful reduction.\n\n“THOUGHTFUL” and “REDUCTION”\n
- App called “Writings” does a beautiful job at thoughtful reduction. What do I really need to effectively write?\n\n
- App called “Writings” does a beautiful job at thoughtful reduction. What do I really need to effectively write?\n\n
- Most mobile users are not sitting at home on the couch with time to burn. They are on the go, commuting, on a job site, or somewhere where they need information... and they need it NOW!\n\nDesigning retail touch screen kiosks taught me a lot of lessons in this area. People walking through a store will maybe spend 2 minutes at a kiosk at most. And that’s only if you capture their attention within the first 10 seconds. Otherwise they just walk away. Their too busy to spend any more time. They need to get the information fast, or they don’t want it at all.\n\n
- Which brings me to our next point.\nMy personal goal is always three touches or less, but 5 gives you some wiggle room for more complex tasks.\n\nDEMO: Want to find a recipe for ice cream that I can make to cool off. Launch epicurious\n\n
- Many products that claim to be intuitive and easy to use end up having these bloated help systems. In mLearning you do not have the luxury of giving someone a five minute orientation to the software. They need to be productive right out of the starting gates.\n\nIf you ever have the urge to include a help button, please think about the real underlying reason why you need one and address that issue until you don’t need it anymore.\n\nSome apps will present an overlay when you first launch the program to nudge you in the right direction. I think that is a far more friendly way of handling instructions as compared to a big ugly scrolling text field.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Invest the time up front to clearly define and refine and re-refine exactly what you’re presenting, how it’s going to look, how the user is going to interact with it, and how they will receive the information.\n
- PIXAR STORYBOARD ARTIST:\n“I storyboarded on Ratatouille for almost 4 years. [The process at Pixar] is very much one of doing and redoing, making things better step by step. It involves a willingness to pick apart the movie and its themes. This constant editing and refining can be frustrating at times.”The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching.\n\nTell story about Professor @ ASU who let students produce their planning documents AFTER they created the final product. \n\nSo grab a big fat sharpie and don’t worry if you can’t sketch.\n\n
- Would YOU enjoy using your own finished product?\n\nPixar sets out to make movies that they would want to go see themselves. We should always strive design mLearning materials that we would want to use ourselves, even enjoy using ourselves, if we were the target audience.\n\n
- \n
- 1.The device screen size may be different\n2.The orientation can change from Vert to Horiz\n3.Things like “retina display” doubles the # of pixels\n\n
- DEMO: Twitter for panels and reserved zones\nDEMO: SPIN for scrolling menu\n\n
- Interface guidelines have said 40 pixels, but that doesn’t work anymore because of Apple’s retina display.\n\nTarget size study for one-handed thumb use on small touchscreen devices.\nProceedings of the 8th conference on human-computer interaction with mobile devices and services:\n"A target size of 9.2mm for discrete tasks and targets of 9.6mm for serial tasks should be sufficiently large...without degrading performance and preference"\n\nIdeally, an inactive space of at least 1mm should be provided around each target\n
- \n
- Special effects fans always talk about the best special effects being the ones you can’t tell are special effects.\n\nThe user interface should be like an iceberg. The absolute critical items appear within reach just above the surface, but the majority of it lies below. An app can have plenty of settings, controls, and other preference panels to allow for personalization, but it should work just fine by default and only present itself if the user calls for it. The user always needs to feel in control of the interface, and not the other way around.\n\nEXAMPLE: Video player. \n\nDEMO: GoSkyWatch\n\n\n
- The content represents the learner’s entire purpose for using the app. Put it on a pedestal, shine a spotlight on it, get out of the way and give it the attention it deserves.\n\nDEMO: FlipBoard w/National Geographic\n\n\n
- \nUnnecessary splash screens, animations, sound effects, and other gimmicks is just a waste of time for the mobile user. It’s also a waste of battery life and bandwidth. These gratuitous extras don’t serve to enhance the experience or help the learner reach their goals any faster. Leave em out!\n\n
- 1. The simplest way to achieve simplicity is through thoughtful reduction.\n2. The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching.\n3. Don’t think in terms of pixels, think in terms of scalable elements!\n4. The user interface should be like an iceberg. The critical elements peek above the surface and everything else hidden below.\n\n
- \n