Introduction to the Mobile App Design
What you should know to start creating digital products for the mobile-first world
The mobile dominates. There are way more mobile phones than desktop devices, and they generate more internet traffic. Looking across the chart that represents platform comparison worldwide, we can see how the so-called Post-PC era was coming:
At the turn of 2016 and 2017, the mobile took over the lead, and there is no indication that this trend is changing any time soon. The graph presents internet traffic only, but there are also native applications. With that in mind, we can say that the mobile is the king of digital.
Android vs. iOS
Currently, we have a duopoly. There are two important mobile operating systems: Android developed by Google and iOS created by Apple. According to StatCounter GlobalStats, their current market share (March 2019) is respectively 75.33% and 22.4%.
While two dogs are fighting for a bone, a third runs away with it, right? Not in this case. The situation of the other players has never been so bad. Two percent market share is a margin, and it will not be easy for them to win the developers over.
Use platform conventions
To ensure a consistent experience for native apps users, the creators of these operating systems provide us with some general guidelines that you can follow while designing. Google Material Design refers to Android, and Human Interface Guidelines applies to iOS. Be sure to bookmark these pages as you will often come back to them during your work. Poke around and get familiar with the naming, design and usability patterns. Good to know that these documents are updated frequently, so check them out from time to time to keep abreast.
You should treat these guidelines as mere suggestions rather than set-in-stone instructions. They are to help you, but it doesn’t mean that you cannot break them. You can even mix conventions and apply some elements characteristic of one platform to another. Have you ever tried to compose a message in the LinkedIn app on iOS? See, that’s what I mean.
If you have only used one platform, let’s say you are Android primary user, and you want to design for iOS, I strongly recommend you to switch for some time. You’ll get to know the look and feel of UI and better understand its users.
Design Process & Toolkit
The process of designing a mobile application is not much different from what it looks like with other digital products. To a very large extent, it proceeds as follows:
- Aha! moment — or just a starting point — depending on the project it can be your idea for an innovative product (another Facebook killer!) or just gathering requirements from the client.
- Modeling — this stage includes activities such as writing user scenarios and user stories, presenting them in the form of the flow charts and drawing low-fidelity wireframes. There are a lot of tools for building flows that allow online collaboration. RealtimeBoard, now called MIRO, is very popular. If you need something that is free, you can use Freehand from InVision. When it comes to the wireframes drawing, paper and pencil come to mind. Need something more? You can take pictures of your drawings and easily build interactive wireflows using Marvel mobile app.
- Mockups — a visual layer of your app. At the beginning of the digital design era, Adobe Photoshop ruled. But as a tool, which had not been created for the UI design purpose, it had to be given up on. According to the Avocode Design Trend Report, since 2016 good ol’ PS is no longer in the lead. Now the Sketch app is the industry standard for the high-fidelity mockups. Thanks to the huge community that has grown around the product, we have extensions and plugins, plus a huge number of third-part app integrations. Sketch remains simple, but yet a powerful toolkit.
- Prototyping — an interactive prototype will help you look at a feature from the user’s perspective. It can be also used for presenting the flows to the stakeholders, clients, and developers. The most popular tool is InVision app, very often combined with the sketch by the Craft — featured set of plugins. It’s worth mentioning that recently Sketch was equipped with a set of prototyping tools.
- Animations and micro-interactions — this stage is sometimes skipped, at least for three reasons. First of all, the default components, provided by Apple and Google for iOS and Android platforms, have built-in predefined behaviors which ensure interaction with the user. Secondly, complex animation can greatly extend the development process. Last, but not least, it requires some skills which not every designer has. But here the tools come with help: for simpler patterns, Flinto and Principle are used. When you want to build something compound, use Framer instead.
- Development handoff — you will certainly want your project to be implemented, so you have to somehow forward it to developers. This process is called a handoff, and yes, there are apps for that. If your company or the team hasn’t chosen anything yet, you can play around with Avocode, Sympli or Zeplin. All of them allows your collaborators to export assets, check the design properties and way more. They are also widely used for communication within the team.
Since the point when digital became the dominant channel beating paper, in my opinion, no other toolkit has developed as dynamic as those dedicated to UX and UI designers. I can distinguish two major trends. Firstly, the monopoly era is over: although you can indicate the primary tool for each design stage above, it changes rapidly. For instance, Sketch is challenged by Figma and Adobe XD, which attract more and more designers. Second: tools become self-sufficient, which means that you can cover the whole design process using only the selected one: just take a look at the InVision Studio.
The Specifics of Mobile Design: Think About Limitations…
Somewhere I’ve read that creativity is only possible where there are limitations. Designing for mobile phones, you should take these into consideration:
- Smaller display size — what in practice means that fewer items will fit on the screen. Website navigation patterns will not work. It also enforces a different approach to content and leads to concise communication.
- Designing for the touch screen — your app will not be operated with the keyboard & mouse, but with the gestures & fingers. Elements will have to be larger so that they can be tapped.
- Data usage & performance — you should be cautious using big files and media formats that may require downloading a large amount of data from the internet — it may expose the users to incur additional charges. You should also consider if the number of API calls that your app sends to a server will not reduce the overall performance.
… and possibilities
Mobile apps are related much more to the devices than traditional desktop or web applications. You have that great opportunity to immerse your users into a product by making the software and hardware indistinguishable. Consider gestures as a way of navigation. Remember that almost all the modern devices are equipped with a camera and a microphone — think about them as alternative methods of entering the data. Think through how your layout will adapt to the portrait and landscape device orientation.
Once you decided that a mobile app is going to be a part of your digital strategy, you should think about what role it plays in it. Whether it’s going to be the primary touchpoint for your users or a complementary to another platform or a service, it will determine the overall direction that your design should follow.
This article has been originally published on FreeportMetrics.com