StackTips
 20 minutes

Mobile application design study

By Nilanchala @nilan, On Sep 17, 2023 Blog Posts 2.23K Views

The mobile ecosystem is growing tremendously; such a rapid growth that from startups to fortune 500 companies are heading towards mobility. As mobile devices are smaller computing devices, not much of the serious business that runs on mobile. Huh! Now I will contradict my previous statement. In fact, this was the mindset everyone had including developers and companies. But since 2010 mobile application is rising so rapidly that mobility turned as a serious market. This post will explain things to consider while making an effective mobile design.

Real world mobile usability study

Couple of years back computer/web application development is one of the front pages and a serious topic and mobile were in the back seat. Any design or application model formation was followed in the context of big sized computers. As mobiles are getting smarter with more capabilities and a huge user base, companies are focused on mobile user interface design.

In short, mobile design context is king! It is no longer possible to imagine a mobile model looks same or similar to big sized web layout. Each of the fundamental design parameters like changing the interface dramatically while changing device orientation, implementing sensor capability, etc. are very much important consideration while analyzing the best user interface.

Usability study is always been very much required for cases like, when the customer is standing on a busy street corner and looking at a map; sharing photos of the kids while sitting on the couch with a spouse; talking with one’s boss one-handed while trying to park the car; or reading while riding the city bus.

To really understand the user mood, you or your team has to get out to the field and observe these interactions first hand, as they happen. And while you are out there, simply asking questions is no longer enough to get accurate and precise data. To make solid design decisions, ideally, you should observe behaviors using a realistic prototype of your app as a tool for eliciting these behavioral responses.

Variety of form factors

The mobile computing world is largely different from the web and PC world. Mobile touch computing yielded a variety of platforms and device form factors. Small phones, large phones, small tablets, mid-size tablets, and large tablets are widely available for sale today. And all the touch Interfaces claims to provide simplicity and using different approaches to software design because of the different operating system, programming languages base, form factors, and different interface patterns.

Today phones and tablets are not the only platforms to be worried about. Android is supporting installations in everything from music system, TV, and cars. Considering the need and usage of the devices, all these installations require considerable changes to the user interface to fit the specific target. This means that the old model of wire-frames is no longer reflects the feasible for targeted platforms. In order to provide the best user experience, we need to understand each platform and modify our design for these objects. This reflects the significant changes to the design guidelines and approaches.

This section provides an overview of screen configurations of mobile ecosystem, and an overview of screen-compatibility features. Here we will look into some of the very important factors while designing mobile interface. Here in this tutorial series we are considering android platform design guidelines in comparison with world leading iOS platform.

Screen size

Actual physical size, measured as the screen’s diagonal. While iPhone comes with two standard resolutions (shown in image below), android groups all actual screen sizes into four generalized sizes: small, normal, large, and extra large.

iPhone4S and earlier 320×480 vs. iPhone 5 640×1136

Screen density

Density defines the number of pixels within a physical area of the screen; usually referred to as dpi or PPI (dots per inch). For example, a “low” density screen has fewer pixels within a given physical area, compared to a “normal” or “high” density screen. iPhone is coming up with three standard PPI rate 163, 202 and 326. But, Android groups all actual screen densities into four generalized densities: low, medium, high, and extra high. Find some more information on different device screen density

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Orientation supports

Orientation defines the orientation of the screen from the user’s point of view. This is either landscape or portrait, meaning that the screen’s aspect ratio is either wide or tall, respectively. Be aware that not only do different devices operate in different orientations by default, but the orientation can change at runtime when the user rotates the device. Each of today’s smartphone is orientation aware, irrespective of brand and operating system.

Resolution Consideration

Resolution is the total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups.

Density-independent pixel (dp)

dp is a virtual pixel unit that we should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application’s UI, to ensure proper display of your UI on screens with different densities.

Standard android screen sizes

  • xlarge screens are at least 960dp x 720dp
  • large screens are at least 640dp x 480dp
  • normal screens are at least 470dp x 320dp
  • small screens are at least 426dp x 320dp

Mode of interactions

Soon you buy a brand new phone, you will be amazed to use all the device supported advance features. If your phone has a voice command, then you would like to do a keyword search putting voice command rather typing.

When it comes to mobile design, keep in mind to take full advantage of features like voice command, motion sensor, and multi-touch, gestures, etc. In order to design effective interface, your prototype and customer experience testing techniques need to take into account for all modes of available interactions.

Touch Interfaces incorporate simplicity

Swipe Gesture  in app

The browser based software runs on large screens could afford to proven to have a high tolerance of complexity, fairly due to large screens and relatively high degree of focus that customers have on your software just by virtue of having to sit down at a chair to use the computer.

As mobile devices are all time accessible devices, your application interfaces need to be simple and clear. Expecting lot as some of your heavy lifting enterprise application will turn your mobile design very messy. It should be having an acceptable amount of features with a smart looking interface. Each mobile platform has guidelines that provide touch interfaces, which is claimed to be unique. However, I personally don’t feel much of the difference as all of the smartphones are enabled with the same touch capabilities.

Delight is mandatory

Thus, no matter how trivial and cost-effective, the mobile application design needs to be as delightful as possible, even if “delight” simply means the software helped the customer complete the task as quickly as possible. The best mobile experiences must behave and feel more like games. The fun elements (such as transitions) play a big role in the experience.

In contrast, you will find little limitation in some of the old smartphones. Older and low capability devices are supporting minimal or no transitions. This means that while you are prototyping the design of your app, a serious amount of time is required to explore the element of transition that will support wide range of targeted devices.

nilan avtar

Nilanchala

I'm a blogger, educator and a full stack developer. Mainly focused on Java, Spring and Micro-service architecture. I love to learn, code, make and break things.