Web Designer != Mobile Designer
Over the years I’ve worked on a number of projects where a web designer has been pulled in to help with mobile design, unfortunately it’s never works out very well.
I believe it’s a common mistake to think that a good web designer means they will also be a good mobile designer. Mobile however has very different principles than web design.
“Web conventions are design decisions that work well on web but don’t translate when used on iOS. Not only do web conventions not fit in with the user expectations on the platform, they just don’t feel right.” – Designing for iOS versus Designing for Web
Developers are all about reusing code, using existing libraries, writing less code, etc, aka reusing is better. Designers in contrast are all about making things look pretty and standing out, aka being different is better.
These are some general things I’ve noticed over the years about Web Designers vs Mobile Designers when doing mobile design.
Typical Web Designer
- starts by designing logos, custom icons, picking color schemes, etc
- tend not to do wireframes, instead do full color design in Photoshop
- focus on individual screens, rather than how they are connected
- overload screens with different types of content or having too many user actions
- use web terminology like dropdowns, rather than mobile UI like spinners
- designs custom widgets from scratch, rather than reuse standard components
- create new navigation systems, rather than follow mobile navigation conventions
- often use small fonts, don’t consider readability, screen size or poor lighting conditions
- includes excess branding, although don’t need to show logo everywhere since user already knows what app they are running
- don’t understand the limited screen height and the impact on a reduced content area
- create small clickable areas, still think in terms of mouse pointer rather than finger size
- use UI components from different platforms, for example use Android elements in an iOS app
- truncate long text which is expandable on click, but should instead push a new view with the full content
- require excessive typing by the user, example typing in search before seeing any results
- don’t consider what data is available for the app to use, or design things that aren’t technically possible
- inconsistent element location on different views, since its ok to do in the web world
- keen to ‘go crazy’ with the design and reinvent the wheel, rather than follow best practises and conventions
Good Mobile Designer
- starts with high level screen flows, thinks of the movement throughout the app
- focus on doing one action or displaying one type of information per screen
- does initial mockups as wireframes without getting distracted by colors, fonts, icons, etc
- follow UI guidelines, mobile conventions and best practises from Apple and Google
- re-uses existing standard UI component specific to the target native platform
- strive for a design that is familiar to the user on their target device, different navigation for iOS vs Android
- create large touchable areas, easy to distinguish by the user, easily selectable by touch
- focus on usability and readability first, rather than obsess on visual aesthetics
- limit the amount of typing that user is required to do, provide touchable options that don’t require typing
- reduce unnecessary text that isn’t needed in the app, leave it for App Store description
- considers different device screen sizes and their available content area, iPhone 4 vs iPhone 6s
- create consistent element locations through all screens, nav bar buttons vs bottom toolbar
- design is driven by what data is available, consider time to retrieve data
Note, there are always exceptions to the rule and I’m met some great web designers that were able to transition to mobile design. But more often than not I continue to experience the pitfall of web designers trying to bring web ideas to the small screen, and they just don’t translate directly.