May 13, 2023
If you are concerned about having a mobile version of your website interface, the first thing that comes to mind is having a Mobile App. Then comes the question of choosing relevant devices and you realize that it is next to impossible for you to create applications for all of them. So we decide we'll first go with iPhone or the high end range of Samsung's Android phones and start our design process. But the reality is that not all our target users have iPhone and Samsung S3. Today, it is very difficult to identify user groups with the type of device they have.Another problem of designing with devices is the user interface patterns and paradigms that each phone follows. An iPhone has its own sets of guidelines and standard components. Andriod is so flexible that almost every other phone looks new and it is impossible to study the patterns of each phone and design for it. What happens ultimately is that a standard design of the interface goes to all the devices not taking care of the particular phone's standards.It is reasonable to think that we have a blank slate in a touch phone and do what every other app is doing. But the problem is with consistency. The user using a phone develops expectations of finding certain things at certain places. For example, you might think that my app has the Back button in the same place for all the phones I have designed for. But an iPhone user expects it in the top left corner. An Android user may not need a back button at all as he or she is accustomed to using the bottom right hardware button.So what should we do then. Designing for web and designing for screens is the answer. When we look at the internet browser as the medium, we design for a screen size, not for an iPhone or an Andriod. This has many advantages:With the support of HTML5, CSS3 and the scaleable graphics and fonts available today your design can adapt to any phone with up to 20% variation in screen size.
- Designing for a screen does not have the constraints of the devices interface patterns, you can be as creative as you want.
- Getting feedback and iterations are easier because the content is internet dependent.
- You can focus more on solving users' task problems than the device compatibility problems.
- You can use the opportunity for creating a unique experience and identity for your brand.
- Your design is consistently useful to all users, it does not break or become inconsistent for some.
The most important technique of designing for a screen is to think broader, keep a screen size in mind and do not bother about too many device variations. The only constraints (or possibilities) we should look at are those available with the internet. Designing for a screen is also about being sensitive to the concerns of designing for the particular screen size. I have mentioned the three challenges of designing for mobile smartphone devices here:
- The limited space - Phones do not have all the space in the world and there is only one answer to this problem - progressive disclosure. The key is to have the most important content on the main pages and then have sufficient simple options for the user to see more. The limited space also limits the options to impress which makes it important to have a minimalism approach.
- Touch interaction which needs the elements to be big enough to be interacted with - Users love to be guided through the experience and if they do not see clear large areas to touch, they might not be interested. Give few options and spread them enough. Small links are not made for phones and can be aimed at by mouse pointers better than finger nails.
- Legibility of content - Designers design on Mac books, not on phones and they love the zoom shortcuts. So they zoom in, make the mobile screen a lot bigger and fit whatever they want. But the poor user on the phone is not able to read the text or see the details of the excellent graphic.
Focusing on the screen and designing for the same can help you create an experience which can be much more useful to solving users' task problems.
zp8497586rq
