Difference Between Mobile App Design And Website Design

It's a common misconception that web design and app design are interchangeable. The gap between the two formats is bigger than you may think, and as companies start to invest heavily in mobile apps, not only will they need to ask the right questions of their mobile app developers, they'll also need to ensure that these developers understand the fundamentals of mobile app interfaces.

Rules for the Mobile Designer

1. Pay attention to the UX

Users want familiarity and consistency. When designing your mobile app, the user interface will play a critical role in determining if users will easily be able to identify their "next steps," or if a user will fumble around your design becoming frustrated by something they are unfamiliar with. Learn the iOS, Android, Windows Phone, and/or Blackberry standard UX elements, and use them at least as a reference for your design. Make your user feel at home with the app by using elements he or she already understands.

2. Touch, Not Click

Sometimes the obvious is easy to overlook, but when dealing with app design, remember that people are touching rather than clicking. No mice here! Make it easy for users to touch, and forgo things like rollover effects or buttons too small for the average user to press. If you're using a plugin to "mobilize" your site, it may just be fitting your desktop design inside a mobile screen size, so always test it yourself to make sure it's just as easy to navigate as your desktop site.

3. High Resolution Images

Who doesn't love higher resolution? Crystal clear graphics, sharp text – this means a better interactive experience with the app. Since smartphone and tablet manufacturers are moving toward higher resolutions, like the retina displays from Apple, standard images won't do. If you use standard resolution images and graphics for mobile websites or apps, they will be displayed as pixelated or grainy on today's high resolution screens, and the poor image quality will create a sub-par experience. Be sure that images are high quality and match the specifications for high resolution devices.

4. Speedy Use

Mobile devices are used on the go. In an elevator, in a taxi, in line at the store, or walking downtown to the next meeting – people are using their mobile devices to acquire information quickly. Think about what your users are trying to find when they access your website or app from a mobile device. Restaurant websites should provide easy access to contact information, hours of operation, reservations, and menus, assuming mobile users are trying to find a place to eat in the near future. However, blogs and news outlets are probably accessed more when users have a bit more time away from home, like in a doctor's waiting room, so if users can't access full articles, or (good heavens!) there isn't a mobile version of your website, they will be turned off.

5. Size Matters

While tablets are amazing tools that provide an experience that is similar to a laptop, when considering smartphones, you have to take into account that the overall real estate is very small. This has to play a big role in your final design. Consider buttons and graphics too close to the edges of the device (can someone whose phone is protected by a case even touch it?), consider the size of the buttons (beware of fat finger syndrome), and remember that minimizing scroll is also key. You can't just shove tons of content into a giant column and call that mobile-optimized. Nope.

What is the difference between website and mobile design featured image

6. Fields of Frustration

Have you ever landed on a page with a form that requires you to fill out a never ending cascade of fields just to get what you need? Users do not want to spend time typing on their phones, no matter how much easier it's gotten. It's one thing to send a text, a Tweet, or any other quick message, but filling out more than 2-3 field forms, one after another, is just not something you should include. Instead, allow users to sign in with Twitter or Facebook, or continue as a guest. You get all of the valuable user data you're looking for, without the headache for the user.

7. Context and Content

Websites have the luxury of sharing all sorts of great information about a business. On mobile, it's important to prioritize the content shown so that users get to exactly what they need. Consider a user looking for a hotel. Some important content for mobile users would be rates, specials, photos, contact information, address, and proximity to entertainment. It's also a good idea to post last-minute specials on the top of the home screen if you expect some traffic from last-minute travelers. While it's great to provide access to everything from your desktop website on mobile, try placing content that might not be as important (history of hotel and management bios) on interior pages, or within a single "About" tab, or skipping it altogether. Again, think of how, where, and when people will need access to this information or utility, and use your website or app's analytics to tell you even more about how they actually DO use it, and make adjustments.

8. Design On A Wire

Wireframing is just as important in mobile as it is for desktop. You will need a separate wireframe for your mobile website, even if you've already created one for desktop. We also use wireframes to involve our clients in the process – a visual representation of what we're working on. In app design, it's so important to establish the user experience and functionality before committing to a design.

9. Device Dilemma

The growing market of mobile devices is a constant challenge for mobile app designers. Apple maintained a consistent look and feel for iOS 1.0 – 6.0, but 7.0 represents a major shift from skeumorphism to flat design. Even our designers, who are familiar with mobile customs and elements, need to keep current on the particular needs and attributes of each operating system as they evolve. Android, for example, requires the designer to be aware of changes between Android OS versions, and to understand the vast array of devices on the market. Android devices run a wide spectrum of screen size and capabilities, so researching this ahead of time can save a lot of design frustration.

10. Rules of Engagement

Designers should take advantage of simulation tests to see the design in action, gauge the user experience, and ensure that everything functions appropriately for the user. The last thing anyone wants is a frustrating experience that could have been avoided with thorough testing. To avoid this, we recommend and institute A/B testing, focus groups, iterative testing and thorough debugging. Quality assurance is a process that should be a part of every phase of a project, not an end phase.

Check our web design to our client's website: Qantas Vacations

Back to blog