Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are a lot of things to consider when designing for mobile devices. You need to consider the environment in which it's being used, the context in which it's being used as well, the input method or methods depending on the device, and its other capabilities, as well as certain metaphors you can use in your app. To start off, just think about where the user is. When you're developing the app, everything looks clean and clear and is easy to read. But the user on the other hand is maybe at the best case, inside wherein lighting might be a little better, but you could easily have this glare as you move to outside and even outside on a sunny day.
So you need to make sure your graphics have enough contrast and can stand out regardless of where the person is. Next, you want to consider the context into which it's being used. So what are they doing when they're using this app? Are they waiting in line at a Starbucks? Are they watching a commercial? And you need to be prepared for this app to be interrupted and it's basically being used potentially in these little gaps of time in people's lives. So you need to design for these quick tasks and the app needs to be easy to get into and out of.
Next step, how are they holding the phone? Are they holding it with two hands, so do you have the controls by the thumbs, or are they holding it with one hand and even controlling it with one thumb or using their other finger? There's many different ways people hold their devices, but you need to consider your content as well as how the user is holding the phone. Also what about a tablet? How are they holding this tablet? It is a bigger device, they might use two hands, so they might have thumbs on both sides that they can use, or they can hold it with one hand and use the other hand to go ahead and navigate to the screen.
So consider where you put the controls based on how the person holds the device. Since I'm talking about buttons, well, what size should we make these buttons? Now if it was a website, we can make them say as small as 15x15 pixels, because really that's the size of a cursor. It's really pretty small. But when we go to devices, we know that you actually have to click on them with your finger. So what's the size of a fingerprint? Often icons, if you're on Android or iOS, they're roughly 45x45 pixels.
So you need to go ahead and take whatever you have on the Web and pretty much triple its size to make it clickable on a mobile device. Now that you know the size of your buttons, well, where do you place them? The screen on the left-hand side, basically what you're doing is you're manipulating a slider, but it's changing the number below the slider, so you're manipulating a number that you can't even see. So it's better to flip those to make sure you could scrub that slider and change those numbers that are actually above the finger. So you need to consider that the finger comes with the hand and your whole hand can cover up some of the content.
And just like on the Web, the higher up on the screen, the more important content would be or any numbers you might manipulate. This is where it gets really fun, because these devices have different capabilities as well. This is really great because we can go ahead and use Multitouch. Say for instance, if I have a photo, I could pinch in, zoom in on the photo. So it's really exciting, I don't need another button. That's maybe my Rotate button. I can go ahead and use the Accelerometer as well. As I tilt the device, content could change. Maybe I shake the device and it clears fields.
Again, Orientation, how it's rotated, the Microphone, Keyboard, Geolocation, so get their location, serve up that right content, a Camera and even GPS as well. So, really exciting capabilities that these mobile devices have that you can go ahead and use in your app. But also with these devices, they're a lot smaller and not as powerful. And it's often said that the average processing power of a mobile device these days is about the processing power of a computer about eight years old.
So if you can think about what it was like to work on a computer about eight years ago with those constraints and even with those bandwidth considerations, we need to think about those as well. Less processing power and not-always-a- reliable connection as well on mobile devices, aside from the screen being about a third of the size of say for instance, a laptop screen. Since I'm talking about size and resolution, it actually varies quite widely amongst these different devices. We have earlier iPhones and iPods at about 480x320.
That's the pixels width and height. And then the pixels per inch, the PPI might be 163. So we have more dense pixels, but there's not really that many compared to the iPhone 4 which has a 960x640 pixel resolution, yet the screen is actually the same size. So there's quite a few different sized mobile devices in the market these days and we need to make sure our content adjusts appropriately. Also we have tablets. Considering there's a couple different size tablets, how does our content fit on these different tablets, regardless of the orientation of the device.
You also want to consider using common metaphors. Say for instance, you might have the Plus sign, which if that's on an icon, you know that's to add something. Or you can have Arrow buttons to go to the next or previous items, or even use a Calendar icon to access the calendar. You want to think about everyday items you use and see how you might be able to use them in your app. A good site I like to go to for this is something called patterntap.com. Lots of great ideas there, when it comes to using common metaphors.
Lastly, you want to test your app and not at the end of the process, but the whole time you're creating this app, you want to test it out on your own phone and test it out with your friends to see what they think and how they respond to the graphics, the buttons, all of that content. And you want to gather that feedback and implement it into your app. And that's the great thing about apps, is they're never permanent, you can always release an update, but it's great if you get that feedback early on and you're able to implement it right away. Keeping these design guidelines in mind could increase your app's chance of becoming a success.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98353 Viewers
61 Video lessons · 85643 Viewers
71 Video lessons · 69584 Viewers
56 Video lessons · 101916 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.