Today we had a session about designing for mobile/ tablets and the things you need to consider when designing for these mediums. I learnt that there is a lot more to consider on mobiles, compared to designing for a desktop computer. The main thing to consider is the usability of the applications/ websites on mobile software, and finding the easiest and fastest way of getting the information across. It is essential that companies design sites that cater for mobile devices, as they are outgrowing the desktop computer; in 2010, internet usage on home computers went down by 20%. Here is some of the information I picked up from today’s session:
- Native Apps: coded/ designed for certain phone systems e.g. ios (iPhone), Google Android, Windows Phone. These are faster and can use some of the phone elements, such as GPRS.
- Web Apps/ Sites: available for all phones, loaded from a web source; usually need a 3G or wifi connection, so not as accessible as native apps e.g. on the go. If you were to create a portfolio app/site, it would be best to use one of these.
- Location: need to consider where they will use the app e.g. at home, commuting, at work etc.
- Time: the length of time they will use it, the average amount of time spent on a website is about 2-3 minutes before people become bored, but people spend longer on mobile apps/ websites. Also think about the time of day they will use it, if it is an entertainment app, the peak time would be around 8pm-11pm, therefore darker colours may be better to use, if in a dark surrounding to prevent screen glare. More lengthy tasks would be done on desktop computers e.g. editing photos, although alternatives such as ‘Instagram’ are quite useful as a quick alternative.
- Interface Design: ‘usability over design’ – don’t get too carried away with how the app will look, consider the user who will be using it.
- Screen Size: this forces you to think about what is important for the user, also think of constraints of screen size:
- iPhone 3.0 – Resolution: 72 ppi (pixels per inch), Screen Size: 320x480px, Icon Size: 57x57px
- iPhone 4.0 – Resolution: 300+ ppi, Screen Size: 640x960px, Icon Size: 114x114px
- Android (Medium Density) – Resolution: 72/160 ppi, Screen Size: 320x480px
- Android (High Density) – Resolution: 240/320 ppi, Screen Size: 480x854px
- Orientation: can be changed, flipped sideways (portrait/landscape), how are they going to hold it? Should certain elements change or disappear when orientation is changed? Some apps lock orientation , although it’s best to cater for both and how people hold their mobile.
- Screen Density: the lower the ppi, the lower the quality of image, the higher dpi the more crisp the image will be – need to consider this before starting design
- Design Bigger: always design for the latest versions (which will generally have bigger screens) as they can be scaled down on lower versions without losing quality. It is better to do designs in Illustrator (vectors), therefore if a newer version with a bigger screen comes out, you can just resize it, rather than having to start from scratch with a Photoshop file.
- Wire Framing: Before you start designing, create a wireframe, this allows you to plan and play around with elements and locations
- Prioritise: prioritise what appears on screen and what functions you choose to give to the user; data transfers can be expensive so it’s best to give the user what they want, and quick.
- Finger becomes cursor: this has good and bad points, you need to make your elements BIG and CHUNKY so a finger can press them, but not too close together as you don’t want to press other elements by accident. General button sizes: Apple (44x44px), Windows (58x58px), Nokia (64x64px) – but the button could be 30 pixels with a 14px margin, it doesn’t mean all your buttons have to be the same size. Keep it clean, cluttered layouts won’t be accessible via fingers!
- Reaching the screen: place the navigation in the correct place, this makes it easier for the user to perform tasks and ensure elements such as ‘cancel’ buttons are away from easy access areas to prevent accidental press, this could get annoying!
- Content over navigation: most users want content straight away, don’t want to navigate for long periods
- Batteries/ Limited Battery Life: try to limit the amount of graphics on screen, too many graphics can become intense and drain battery life!
- Scrolling: try to avoid scrolling, this is harder on mobiles compared to desktop and make sure you create an easy way for the user to get back up to the top of the page!
- UI (User Interface) Patterns: achieve consistency by using similar navigation/tools to other apps/ well known websites, this makes it easier for the user and speeds up processes.
- Follow the leader?: many people disagree with sticking to UI patterns as they all end up looking the same, and may want to create something more custom, and invent new ways of navigating their app/ website.
- Gestures: these give you more functionality to your app, these include things like: tap, double tap, drag, swipe, pinch, press etc.
- NUI (Natural User Interface): this is becoming more common compared to GUI (Graphic User Interface), as they can be more interesting
- Icons: every app needs an icon, this needs to be eye catching, memorable, and remember, bigger is better! This makes an icon more recognisable.
- Responsive Design: Your website works on every mobile device – can have one file which just resizes, this gives the user the best and most seamless experience, an example of this is smashingmagazine.com (try re-sizing the window to see how the design reacts)
- Other Tips: when designing, think about the app one screen at a time, write all the features you want and then strip down to the basics. When making, stretch across multiple platforms (desktop, mobile, tablet), possibly design mobile first so you can strip down the basics and see what you really need, keep the design simple and keep consistency!
