Designing for Mobile Devices

10 Things to Consider When Designing a Mobile App

25% of web users worldwide use only mobile, or rarely use desktop at all. While as much as 45% of young adults (18-29) use mostly mobile. The trend toward mobile-only is clear, and increasing fast. The impact of this on businesses is that a mobile presence has evolved from luxury to necessity. But, wanting an app, designing it, and building it are different things. How can you ensure that your app is an effective addition to your brand, organization or company’s online presence? Although many common principles from traditional and digital design apply, mobile design is unique unto itself, with traits that only apply to it.

So what key things are worth bearing in mind while going through app development Vancouver?

1. Find the right tool for the job: Do you need a Native app, Web Application or Responsive Website?

The 1st question to ask yourself is what kind of features your app will need? That functionality will determine what format is best suited to the job: a Native app, Web Application or Responsive Website. Maybe you need your user to download an app, or maybe designing a responsive website is enough to achieve your goals.

For example, is your app going to use the phone’s hardware? ie: the dialer, GPS, Mail Client or Camera? Or offline access? In that case, your answer is a Native App. Or do you already have a website and your content will largely be a recreation of your existing website? In that case, a mobile friendly website will suit your needs better.

Developing a Responsive Website Web App or Native App

Courtesy of Materialize

2. Follow existing UI design conventions

Don’t reinvent the wheel. Your service, project or product does not exist in a vacuum, and neither will your app. So it should behave with common conventions in mind. There are established standards out there to draw on, and while you don’t have to follow them 100% of the time, using them as guiding principles will greatly improve usability. The last thing you want is to, is be designing something that no one has seen before, or think hard – if at all – about how to use. The best way to tackle it is to look at what others have built before you.

Web Application Mobile App UI Design Kits and Conventions

UI Kit Courtesy of Infinitum.co

3. Designing Apps for Touch

User behaviour is different on mobile than desktop. Mobile apps are often used with one hand, therefore it’s important to think about the way you hold your phone, where your thumb naturally sits and design around the hand and thumb’s natural mobility. That is why so many apps have menus and selectors at the bottom of the screen and content near the top.

Also bear in mind your tap targets. Buttons and links should be large enough and separate enough as to not be accidentally pressed.

Mobile App and Web App Design

4. Hinting for Gesture

Beyond ergonomics, think about other visual cues – or perceived affordances – to show an item is either interactive or has a certain purpose. Devices are very tactile, and our experience with them involves swiping, pinching to zoom, pulling down to refresh and general functionality through very simple gestures. Giving your user subtle clues as to when to tap, scroll, swipe or drag is important.

Web Application Mobile App Design Scroll Indicator

Courtesy of Aaron C-T

5. Provide User Feedback

As important as having functions are feedback mechanisms that confirm a gesture was successful and impactful. Feedback is one of the most important things to consider for a user’s experience, if you want it to be a good one. Key components should slide, glow, bounce, wiggle or ripple. They should do it instantly but not too long. The movement has meaning, and the meaning is: I received your input, and I’m now doing something.

To quote Google’s Material Design Principles:

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

Web Application and Mobile App Design Feedback Confirmation Animation

Courtesy of Colin Garven

6. Consider your Design Hierarchy

We as users are always scanning text for meaning. We don’t have time to look at or read everything, which is why clear hierarchies for organizing information are important.

There is an invisible grid on every surface, and things like alignment, font styles and color greatly impact the hierarchy of information on that screen, and the way someone scans through it. All caps, title case, indents, and underlines all are stylistic choices that might seem superficial but can all create key differentiation for visual hierarchy. You can use whichever you like, but consistency is everything. More on that later.

Mobile App Design Hierarchy

7. The Value of Colour

Color can be equally if not more effective indicating importance, and the hierarchy of information. Contrast is the most important factor in determining if something is eye-catching and visible, or muted and fading away. Darker values, contrasting hues and complimentary hues are most effective in saying, “look at me” or “click on me”. In order to prevent that button from fading away, it needs to jump out from everything else. However, cultural conventions come into play here. Red buttons might ward off people from clicking, simply from the cultural convention of red meaning “stop” or “danger”, and green meaning “go” or “proceed”.  However, if your branding and website are green, then a color that is contrasting is what you need to differentiate the button. In this case, a color adjacent to red on the color wheel might work just as effectively for contrast, such as an orange, or pink button.

 

Web Application and Mobile App Design ContrastWeb Application and Mobile App Design Contrast

 

8. Be Consistent

Define your elements, then be consistent. If one of the ‘confirm’ buttons is orange, then all ‘confirm’ buttons are orange. If one screen has certain padding and font, all screens should maintain the same padding and font. If the app bar is white on one screen, it should remain white across all screens. This prevents the sudden feeling of being disoriented during navigation.

Web Application Mobile App Design Consistency

9. Font choices

The most important thing to remember here is legibility. Can it easily be read on small screens in a variety of sizes? Are there a variety of weights? You might think that script or novelty font is nice, but it will not be nice across your entire app, and certainly not for body text. Your eyes want to scan quickly, and they can’t when they are trying to distinguish ascenders, descenders and flourishes.

Stick with something clean and easy to read. If you’re not sure, here are a few to get you started:

Roboto: The Android sans serif default font

Helvetica: One of the most used and well liked fonts in the world.

San Francisco: Apple’s new typeface, designed in house as a variation of Helvetica Neue, but designed with screens in mind.

For more on Typography in Web design, see our article on Compelling Web Typography

 

Web Application Mobile App Design Typography and Font Choices

10. Prototype

Before you dive in and start having someone develop an app for you, its wise to test the product first.  Prototyping offers a fast, cheap, effective way to test your app before the costly commitment building it. Better to find the flaws – and there will be flaws – now than later.

Prototyping doesn’t need to be complicated. You can prototype and test with friends, family and complete strangers using just a pen and paper. It will give you more insight than you can imagine, and costs you next to nothing.

If you want something more sophisticated, you can take pictures of your sketches and import them into a prototyping tool like POP or Marvel. If you want to go High-Fidelity, you can import to a tool like Invision, Proto.io, or Flinto. Learn more about Prototyping by reading our article on How Prototyping Works and Why its Valuable.

 

Web Application Mobile App Design Low Fidelity Prototyping

 

Lesley Anderson

Lesley Anderson

UX/UI Designer at A.Y. Technologies
Lesley is a caffeine dependent life-form with an eye for pixel perfection. Her skill set is varied, including user experience design, user interface design, creative strategy and content creation. She helps clients discover the behaviours and expectations of their audiences and opportunities for lasting impressions.
Lesley Anderson

Latest posts by Lesley Anderson (see all)

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

©2019 A.Y.Technologies

Log in with your credentials

Forgot your details?