Think like an app designer

Mobile product design is not as simple as it seems. We need to be very device-aware and even change the way we think about problems, which means throwing away a lot of what we have learned from web design.

Like many designers, I started my career with publication design. Soon after, I discovered the online world which fascinated me and at some point became my main focus. In this process, I learned concepts of interaction design and user experience that were completely unfamiliar to me before.

At some point I felt like I was stuck in a repetitive work cycle: I had found a formula, a way to make my designs almost foolproof, allowing me to deliver each new project easier and faster than the one before, but in one way or another, all of them looked the same. After that the first versions for iOS and Android were released.

Then my life took an unexpected turn and I began to focus on something seemingly completely different: mobile app design. That was the real challenge I needed. Not only did I have to learn something new, but I also had to unlearn some of the web design secrets I had been using until then.

A few years later, in fact a few days ago, Apple’s new smartwatch app was released, and the design world had mixed feelings. On the one hand, seeing a device that opens up the possibility for new designs to emerge. On the other hand, understanding a medium with unprecedented interactions and use cases can be daunting.

This isn't the first time we've seen such a device on the market. But because new technologies require new design approaches more and more frequently, we must adapt to this increasingly rapid rate.

The first big push, of course, was the ubiquity of the first internet portals 20 years ago. Before this, most designers like me worked in the publishing industry, and the advent of the Internet required us to learn how to design for interactive media. Users have become more than just spectators.

Some of these transitions were harder than others, which is why many websites at the time looked like buttons on top of publications — designers didn’t immediately understand the characteristics of this new medium.

The same thing happened to App today. It’s common to encounter apps that look like small websites: they build apps like web pages translated to smartphones, failing miserably in terms of contrast, fonts, touch targets, and gestures. They also fail to differentiate who will use the app, where, or on what device.

When designing for mobile, we need to break away from the site structure because it can work against us. We have to approach projects with a different mindset and fully understand mobile devices in order to fully leverage their strengths and produce a delightful experience.

What do you need to do as an App Designer? In addition to knowledge and tools, you need to change the way you think about problems. Here are a few tips for adapting to the world of app design.

Change the way you work

There are hundreds of apps entering the market every moment now - you don't have time to waste.

As professionals, we can no longer afford to spend weeks or months on novel design details before a project begins only to discover that other apps have already solved the problem (and more likely solved it in the same way).

Here an agile development cycle - the concept of lean UX was introduced. This approach is essential for continuous iterative design and development, ensuring that there is a single focus in mind: nothing is certain until users try it.

Therefore, app design cannot start with interface design using Potoshop or Illustrator. Before this, a wireframe prototype needs to be drawn. That way, if changes are made, they can be implemented in a short period of time rather than in months.

Designers generally tend to start with visual design: that’s the most interesting phase for us. To some extent, we are usually accustomed to doing this because it is the only thing we can do.

I've been chatting with many designers recently and I've advised them not to work on a computer at the beginning of a project, but just draw on paper. It sounds so primitive that I have never thought of this possibility. It turns out that this approach effectively prevents us from being distracted by other forms of variables (such as the size of the design document, the colors and fonts used, etc.) - variables and details that actually limit our creativity at the beginning of a project.

Personally, I find sketching on paper very useful as it allows us to focus on the idea and the solution to the problem, preventing us from falling into the trap of thinking about details at the first step.

“Mobile first,” or starting with a small screen, is a good strategy. Even if your app needs to run on both smartphones and tablets, it’s more efficient to start with the smaller phone. Designing from a mobile standpoint allows us to focus on prioritizing, choosing, and changing the mental structure that is accustomed to starting with a large-screen desktop computer first.

The first time I started a project this way, I almost ended it because of a headache. This may be similar to the first time you go to the gym; because the task is difficult, the muscles have not yet adapted and get injured. If you don't complete it, try again another day. You’ll notice priorities shifting and quickly realize what’s truly important in your app.

You can also compare it to traveling with a suitcase. If you had a small suitcase, what would you bring? You would take the most important things, of course, that you are sure you will need during your trip, and throw away the rest. Believe it or not, this common example is similar to what we design for smartphones.

Learn from your significant other

The success of an app depends on the designers and developers who work together to complete the work with the highest quality possible. To work efficiently, you can shorten iteration cycles by working in parallel. So you have to be aware of the complexity of design and implementation.

One way to do this is to learn how to use development tools. You don’t need to develop an app from start to finish, but at least you can establish a way to communicate your design intent truthfully and quickly.

Soon after arriving in Barcelona, ​​I started working in a technology startup. I was quite surprised to find that I was the only designer there - I was literally surrounded by developers, and the bottleneck at first was that everyone was waiting for me to finish their designs so they could get on with their own work.

Over time, I learned to use things like Xcode and other basic programming languages. By doing this, you'll feel like everyone in the office is speaking the same language. Designers and developers often use different words to say the same thing making it difficult to understand.

Recognize the value of teamwork

Going back a little, teamwork is about more than just sharing office space. It involves collaboration among team members and ongoing communication. Lean App Design puts an end to the serial process where one person starts working from where others finish.

But in reality most teams are used to a more efficient combination of Agile processes, where developers follow an Agile approach (completing a goal by a specific deadline) and designers follow a Lean approach (rapid iteration, usually without a specific deadline).

But there are still remnants of waterfall development here, where designers usually work a little ahead of the rest of the team, and developers can certainly start before all the designs are ready.

That’s why app designers must realize that collaborators, especially programmers, are allies rather than enemies. A better and more coordinated outcome is understanding each other and developing the habit of working together.

We are often afraid to share our work. We tend to be somewhat defensive about the comments that might be made, especially from the designer who is taking over. In fact, a lot of what others said, including feedback from people like programmers who don't have a design background, was very important in improving our proposal. Their perspective is often more practical than ours, allowing for a better balance.

Someone at a company I just visited told me that designers and developers work on different floors and communicate via different versions of instant messaging. I suggested that they try a different approach: designers and developers on a project should be placed together. A few months later they told me that product quality and even relationships among team members had improved dramatically.

Use various operating systems

When you design a mobile app, don’t just refer to your own phone. If you are targeting the global mobile market, you must at least include Android, iOS and Windows Phone devices, and constantly get used to using them to fully understand the different usage scenarios of each platform.

The reality is that design in the world doesn’t start and end with the iPhone. Many designers limit themselves to iOS, and when designing for Android, they simply translate - often almost word for word - the original app.

Interaction patterns (i.e., the problem-solving methods that have been established in the design) are different in each operating system. Likewise, designers must frequently switch systems in order to understand and use them correctly.

For example, the location of tabs, how to display menus, and when and how to display primary and secondary actions are all different in each operating system.

You can learn the patterns of each system by following a few practical exercises here: download and install the same app on different phones and analyze their similarities and differences carefully; their patterns will be different. So, if you find an app that looks and runs almost the same on iOS and Android, maybe one of them is doing something wrong.

Additionally, constantly looking at and playing with other people’s apps is a great way to work out your own interface problems. For example, many times when we feel creatively blocked or don’t know how to solve a problem, I will play with my phone to see how they can solve the problem I am facing.

If you don't have a mobile phone with you, you can click on websites containing rich cases like PttrnsAndroid App Patterns and Windows Phone UI Design Patterns, which may be helpful to you.

Standardize everything

Agile development methods require understanding how something will look like and what it will look like before the functionality is implemented. Likewise, prototypes help us evaluate the usability of a product (through user testing). Ideally, it wouldn’t take us too long to build our first prototype.

Few people probably remember the Palm Pilot: one of the first prototypes was a wooden board with paper on which the interface design was drawn. Employees can carry it in their luggage just like a real device.

Its purpose was to test the size and comfort of use, and this prototype was more than enough. The question is to test how far you have come in terms of conception before you can start designing and then get to work.

There are many prototyping tools out there today that can make your prototype look like the finished product even on your smartphone. That is, a prototype doesn’t just show static designs; it also includes images, transitions, and gestures.

Choosing the most appropriate tool will be determined by your workflow, what you want to achieve and your desired results. For example, I often use POP when I only have simple wireframes on paper. With this app I can take pictures of my designs, add gestures and transitions, it’s quick and easy!

But when a concept is more advanced, I find it more convenient to use design-specific software like Sketch, Marvel, Flinto or InVision, to make a more beautiful prototype. (Note that some are not necessarily better than others. Choosing one depends partly on which one you find more comfortable using.)

As I mentioned before, there are a ton of prototype apps out there, and a few months ago I decided to build a little website listing all the ones I knew about. The website provides an overview of each tool's features to help you choose.

On the other hand, approaches like Android's "material design" will focus more on subtle interactions. Prototyping subtle interactions is the job of many designers today. (A tool like Keynote allows you to create this kind of detail easily. Keynote’s Magic Actions option comes in handy.)

Don't believe what you see

When designing a product for the web, you can see it in action while you work. But you have to test the App on a mobile device to see what the interface looks like (functionality). First, this testing is necessary to determine contrast and size.

Tools for Android and iOS that help designers view their work on mobile screens of different resolutions. For iOS, the most famous is LiveView. Another one I use the most is Skala which has a desktop version for Mac (also available for Android and iOS), and if you use Sketch you can try Sketch Mirror.

Unfortunately, there is no such tool available for Windows and Windows Phone (at least not that I know of).

In my workflow, I often preview the design on my phone before starting each step to make sure it’s the way I want it. Likewise, I usually start with the design of one system at a time, and keep my phone close to me most of the time. This way I can constantly check how my work will appear on the screen, and while completing the first batch of wireframes, I make sure the sizes (graphics, text and controls), contrast and colors are what I expect. If you don't do this, you may need more time to fix the problem later when you discover it.

It’s also important to start working with a design document that’s the same size (length and width) as the phone you’ll be previewing your work on. (Note: If you’re designing for different screen sizes, keep in mind that pixels are no longer a good way to measure size, as they vary between platforms — for example, note that points on iOS are different from density-independent pixels on Android. To some extent you must fully understand the differences in how to design and produce images in the mobile app space.)

When your design has been implemented by a developer, check how the app looks and runs on different phones and different versions of the system, not just the best phone you have.

Humble Design

App designers must abandon the idea of ​​creating a final product. An app is never finished because it is a digital product that evolves over time. It is for this reason that we cannot engage in interface design from an absolute standpoint. Instead, it should be determined through usability testing and deciphering the problems that users encounter.

We designers sometimes tend to absolve ourselves of responsibility when users make mistakes and get confused while using our apps. But in fact, it is very likely that we are wrong.

Detecting a problem (and discovering our mistakes) is not a bad thing. Of course, this is an opportunity to learn and correct your work, thereby improving it and making it more useful. One must maintain a humble attitude when doing design.

At a company I worked at, every time I told my boss I had completed a design, he would ask me, “Have you tested it with users?” I usually hadn’t, but eventually I made it a habit, and every time I tested it I was prepared to have an open mind and be willing to see what problems I found.

You can only do this when you are mature enough to accept your mistakes and learn from them. It's hard, but it's worth it to succeed.

Stay on the cutting edge

The amount of information when designing for tomorrow makes it nearly impossible to keep things the same. However, as app designers, we must stay curious about what’s new and what’s going to happen.

This includes app design trends and new system versions. Like it or not, in order to stay ahead of the curve and see the latest app designs we have to install new systems.

Reading the official design guidelines for new versions of the system is a good way to get a variety of design information. You can also learn from industry pioneers like Josh Clark and Luke Wroblewski.

Staying on the cutting edge also means trying to use tools that emerge on the market that can simplify design and make our work more efficient. We can’t be afraid to leave our comfort zone or abandon our old ways of working and designing.

Following these principles, I finally dared to use Sketch not long ago. It was a little hard at first because I was learning something new from scratch, but by the time I had to use it I was already comfortable with the tools I already knew.

Now, a few months later, I find the software to have an easy learning curve. It saves me time and keeps my mind sharp while I work, which is a reward for my willingness to learn new things.

summary

Finally, adapt to the App design from the bottom of your heart. No one forces you to do this, and if you’re not comfortable with it, you’ll probably end up being nothing more than an icon designer, which is just a small part of a larger design process.

First of all, App design requires a new way of thinking. It’s time to get out of the cage of website design and understand that smartphones are completely separate and different from tablets and even watches. This is truly the only way to design complete, complex mobile products.