These
guidelines will help in designing better mobile apps which will improve the
overall user experience. Mobile is very powerful device and becoming as an
important part of human life. So it is very important to design better, simple
and interesting interfaces which helps people in their life and also bring satisfaction. some basic design principles are mentioned in the context of Mobile
application.
1. Avoid
designing long Menus in Mobile app
Long Mobile menus are the result of poor architecture and content grouping of application. It affects the ‘Decision Making’ of a User, also it destroys the importance of main function. Group the functions properly and show the small menus with less no. of choices.
2. Select
the right navigation system for your application
Navigation is the important aspect of any mobile app
because User follows the navigation pattern and finds the information. There
are 2 types of navigation system given as follows,
Primary Navigation types
- Hierarchical (Drill
Down)
- Persistent
- Sequential
Secondary
navigation types
- Search
- Index Pages
- Quick Links
- Bread Crumbs
- Embedded Links
3. Web to
Mobile transformation should be responsive
Mobile websites should be responsive to provide an
optimal viewing experience—easy reading and navigation with a minimum of
resizing, panning, and scrolling—across a wide range of devices.
On
the Mobile World Congress in 2010, Eric Schmidt, the CEO of Google put forward
that designers should follow the “mobile first” rule in product design. What
does “mobile first design” mean? Why is it important? How to make it? I’ll
answer these 3 questions in the following part.
What is
Mobile First Design?
To
understand the concept of mobile first design better, you should know the two
phrases below first.
1.
Responsive Web Design (RWD)
Responsive
web design is a web design method that enable web to fit to the screens of
different devices automatically, displaying the content in a way that people
feel comfortable. This greatly reduces users’ operations like panning, zooming
and scrolling when browsing the web.
These
two concepts were put forward before responsive web design. In order to make
web or application interface display reasonably on different devices, designers
provide customized versions of product for different ends.
Progressive
Advancement means that when we design a product, first we build a version for
relatively lower browser (like that on a mobile phone). This version includes
the most basic functions & features. After that we tend to the advanced
version for a tablet or PC, which is created by adding interactions, more
complicated effects, etc. on the basic version for a better user experience.
“Graceful
Degradation”, on the contrary, starts the product design from an advanced end
like desktop and builds a version with well-rounded features at the beginning.
Then designers make the product compatible to mobile ends by cutting some
functions or contents.
Progressive
Advancement has won the game for now as far as I can see. If UI/UX designers
start a product design with its desktop version, they will inevitably want to
make use of most of the advantages of the advanced end. For example, the hover
effect which is supported by a cursor mouse; HD images & complex charts
which can display normally only when there is a recent bandwidth. In this way
the designers will make efforts to complete an amazing desktop version and only
to find it can hardly be adopted on a mobile end unless they give up a lot of
beautiful ideas. If so, the mobile end version will be more like an
afterthought, an incomplete product which’s been watered down.
But
if we take the mobile end product design as a starting point, under the restrictions
like bandwidth, screen size and so on, designers will naturally seize the key
points of a product, head for a lean & neat product with prioritized
features. When the platform is expanded to a tablet or PC, designers are able
to take advantages of the unique features of these advanced ends to strengthen
the product step by step. This might be the main reason that progressive
advancement strategy is widely used.
You
may ask, why do you spend so much time on explaining the two concepts? The
answer is that “mobile first” is exactly a rule of “progressive advancement”.
"Mobile
first", as the name suggests, means that we start the product design from
the mobile end which has more restrictions, then expand its features to create
a tablet or desktop version.
Why
"Mobile First" Principle Is So Important in Product Design?
Except
for the victory of progressive advancement against graceful degradation as
mentioned above, we have more tangible reasons to believe that mobile first
principle is important in product design. That is, the exploding of mobile use.
1.
Mobile internet usage has surpassed desktop usage in 2016.
2.
People have spent more and more time on internet from mobile ends.
3.
Early in 2012, smart phone sales have overtaken PC sales.
The
exploding of mobile ends urges designers to pay attention to the mobile end and
follow the “mobile first” rule in product design.
How to
Practice “Mobile First” Rule in Product Design?
The
key to mobile first principle is, in fact, a content-centered mind.
The
following part will explain the advancement of a product from a mobile phone
end to a PC end.
(The
design tool used in the example below is Mockplus by Jongde software company.
Mockplus is an easy-to-use PC/mobile application for fast wireframe &
prototype building)
Let’s
make an application about hotel booking. We first sort the content of the site
by importance:
*
Website name
*
Hotel (Domestic Hotel, Foreign Hotel, Hour Room, Special Hotel)
*
Time selector (check-in time, departure time)
*
My Order
*
Customer service
*
Promotion & Advertising
Then
we get a mobile end version like this:
Hotel
Booking App
Domestic,
foreign hotels and time selectors are the most important content. They are
located on the most prominent part of the interface.
By
adding more features on the mobile version and enlarging the promotion &
advertising displaying area we get a desktop version like this:
In
this way, designers are able to creating a product for multiple ends in a
smooth and efficient way instead of ruthlessly removing those good features to
get an afterthought.
In
short, the "mobile first" principle has an important role in product
design. On the one hand, it helps to save product design time and improve
designers’ productivity. On the other hand, it forces designers to pay more
attention on the content of a product, which helps them to created neat and
practical designs. However, as smartphones become more and more powerful, the
mobile end might no longer be considered as “lower ends" in the near
future, so the "move first" may not be an everlasting topic. But for
now, its place in product design cannot be ignored.
With the change in the scenario of
the businesses, there is rising in the innovative concept. The companies around
the world are adopting the modern techniques. One of the which is having a mobile
application. Whether you are owning a small business or having a big
organization in which thousands of employees are working, having a mobile
application is compulsory.
Building the mobile application is
not a cheap process. There is various kind of expenses which are being involved
with the development of the application. In the process of developing the
application from designing the app to development, launching to marketing and
promotion each phase of it need the expense.
Thus, optimizing the application
development cost has been listed down below which can of great support:
Create the Draft of Requirement:
Before getting involved with the
mobile application development company, make sure you are fully aware of the
requirement and what needs to be developed exactly. Clear your mindset as this
will help you get in the right direction. Any kind of the changes done in the
application in the middle will make you pay some unavoidable costs. Thus, on
the other hand, doing the proper documentation will support you in minimizing
the fund.
Do not Rush for Coding:
One of the most vital mistakes which
the mobile app developers used to do is moving instantly on the code
development. But before moving to the code, make sure you have fully understood
the main motive of the application, it's functionalities as well as purpose. Firstly,
work on the app workflows and interface. Sketching is one of the cheapest as
well as the easiest way to getting the desired outcome. You do not need to be
an expert in sketching, as you can also use the tools for achieving the task of
the app.
Give attention to the main feature of
the application:
In an application adding many
features makes its charm lost. The users used to get distracted with the main
motive of the app and it does not remain cool as per the owner. So, it is much
vital to concentrate on the main features of the application and just forget
all the not important one. Try to develop the application which is user
friendly as well as easy to navigate. It has been seen that the simple apps
used to grab the attention of the users than the apps which are much complex.
This also save much amount by keeping functionalities minimum.
Follow the way of Cross-platform:
Targeting the audience of one
platform will make you deprive the users who use the iOS or Windows. Primarily,
the users of iOS and Windows are less as being compared to the Android. But for
getting the most revenue from the app do target all the platform and do not
miss out on the potential customers. The initial investment for the
cross-platform will be high but it will prove beneficial in the long run in the
means of sale, visibility, reach and growth.
Use Pre-Built Templates initially:
Developing the application for the
business cost a lot. So, use the pre-built templates initially in the starting.
These templates can be modified as per your requirement later and will not cost
you much. Hire the best mobile app development company in India who can provide
you the app as per your desire and requirement. Choose from the various themes
available and get your business app done. For targeting the audience make sure
you have enabled the push notification for sending them customized deals and
offers. For this make use of the third-party plugin for the Android as well as
iOS which will not cost you much and is of nominal rate.
Wrapping Up:
There are various mobile app
development company which can hire you more, which did not make the strategies
for developing the app. So, choose the company which plans the process of
development wisely, so you did not require to pay much. This helps you in
getting best company and help you in saving the lot of money that you can use
somewhere else. DB App Solution is one
of the leading mobile application development company in
India, which has a team of highly experienced. They plan
firstly for making the application then start on the coding so that their
customer get the full satisfaction with the application they have developed. Hiring
them will make you ensure that you will get the best app for your business!!
If you are designing any mobile app in Axure then simulating
prototype directly in mobile device for realistic presentation &
demonstration will be really cool. In this article we are going to see how we
can publish Axure prototype and view in mobile like an app.
Step1: Setup page according to targeted mobile device
resolution and size. Also create global guides as per screen size and work
according to guides.
Example: Guides created for iPhone 6s resolution (647x375px).
Reduce the height by 20px in iOS app for status bar.
Step 2: Complete prototyping work and keep all the elements inside
the guide.
Step 3: Publish prototype with some modifications
a.Include View Port tag
b.Set targeted device
c.Screen width
d.Add app-icon
Go to Publish> Generate html > Mobile/Device.
Step 4: Upload prototype in Axure Cloud (Axshare) and generate the link
‘Without sidebar'.
Step 5: Open the prototype link in targeted mobile device using
default browser and ‘Add link to Home’. With this step, you can find an app
icon in Menu of mobile as app.
Step 6: Tap on the app icon from Mobile menu and experience the
prototype link an app.
We will be seeing some more articles related to Axure prototyping
tool. Keep sharing your feedback/comments and suggestions of new topics. Read more 'How to Axure' articles.
The mobile app market is saturated with competition. Trends turn over quickly, but no niche can last very long without several competitors jumping onto the bandwagon. These conditions result in a high failure rate across the board for the mobile app market. Only 20% of downloaded apps see users return after the first use, whereas 3% of apps remain in use after a month.
If any part of an app is undesirable, or slow to get the hang of, users are more likely to install a new one, rather than stick it out with the imperfect product. Nothing is wasted for the consumer when disposing of an app - except for the efforts of the designers and developers, that is. So, why is it that so many apps fail? Is this a predictable phenomenon that app designers and developers should accept? For clients, is this success rate acceptable? What does it take to bring your designs into the top 3% of prosperous apps?
The common mistakes span from failing to maintain consistency throughout the lifespan of an app, to attracting users in the first place. How can apps be designed with intuitive simplicity, without becoming repetitive and boring? How can an app offer pleasing details, without losing sight of a greater purpose? Most apps live and die in the first few days, so here are the top ten most common mistakes that designers can avoid.
Only 3% of mobile apps are in use after being downloaded.
Common Mistake #1: A Poor First Impression
Often the first use, or first day with an app, is the most critical period to hook a potential user. The first impression is so critical that it could be an umbrella point for the rest of this top ten. If anything goes wrong, or appears confusing or boring, potential users are quickly disinterested. Although, the proper balance for first impressions is tricky to handle. In some cases, a lengthy onboarding, or process to discover necessary features can bores users. Yet, an instantly stimulating app may disregard the need for a proper tutorial, and promote confusion. Find the balance between an app that is immediately intuitive, but also introduces the users to the most exciting, engaging features quickly. Keep in mind that when users are coming to your app, they’re seeing it for the first time. Go through a proper beta testing process to learn how others perceive your app from the beginning. What seems obvious to the design team, may not be for newcomers.
Improper Onboarding
Onboarding is the step by step process of introducing a user to your app. Although it can be a good way to get someone quickly oriented, onboarding can also be a drawn out process that stands in the way of your users and their content. Often these tutorials are too long, and are likely swiped through blindly.
Sometimes, users have seen your app used in public or elsewhere, such that they get the point and just want to jump in. So, allow for a sort of quick exit strategy to avoid entirely blocking out the app upon its first use. To ensure that the onboarding process is in fact effective, consider which values this can communicate and how. The onboarding process should demonstrate the value of the app in order to hook a user, rather than just an explanation.
Go easy on the intro animation
Some designers address the issue of a good first impression with gripping intro animations to dazzle new users. But, keep in mind that every time someone wants to run the app, they’re going to have to sit through the same thing over and over. If the app serves a daily function, then this will tire your users quickly. Ten seconds of someone’s day for a logo to swipe across the screen and maybe spin a couple times don’t really seem worth it after a while.
Common Mistake #2: Designing an App Without Purpose
Avoid entering the design process without succinct intentions. Apps are often designed and developed in order to follow trends, rather than to solve a problem, fill a niche, or offer a distinct service. What is the ambition for the app? For the designer and their team, the sense of purpose will affect every step of a project. This sensibility will guide each decision from the branding or marketing of an app, to the wireframe format, and button aesthetic. If the purpose is clear, each piece of the app will communicate and function as a coherent whole. Therefore, have the design and development team continually consider their decisions within a greater goal. As the project progresses, the initial ambition may change. This is okay, as long as the vision remains coherent.
Conveying this vision to your potential users means that they will understand what value the app brings to their life. Thus, this vision is an important thing to communicate in a first impression. The question becomes how quickly can you convince users of your vision for the app? How it will improve a person’s life, or provide some sort of enjoyment or comfort. If this ambition is conveyed quickly, then as long as your app is in fact useful, it will make it into the 3%.
Often joining a pre-existing market, or app niche, means that there are apps to study while designing your own. Thus, be careful how you choose to ‘re-purpose’ what is already out there. Study the existing app market, rather than skimming over it. Then, improve upon existing products with intent, rather than thoughtlessly imitating.
Common Mistake #3: Missing Out On UX Design Mapping
Be careful not to skip over a thoughtful planning of an app’s UX architecture before jumping into design work. Even before getting to a wireframing stage, the flow and structure of an app should be mapped out. Designers are often too excited to produce aesthetics and details. This results in a culture of designers who generally under appreciate UX, and the necessary logic or navigation within an app. Slow down. Sketch out the flow of the app first before worrying too much about the finer brush strokes. Often apps fail from an overarching lack of flow and organization, rather than imperfect details. However, once the design process takes off always keep the big picture in mind. The details and aesthetic should then clearly evoke the greater concept.
Common Mistake #4: Disregarding App Development Budget
As soon as the basis of the app is sketched, this is a good time to get a budget from the development team. This way you don’t reach the end of the project and suddenly need to start cutting critical features. As your design career develops, always take note of the average costs of constructing your concepts so that your design thinking responds to economic restraints. Budgets should be useful design constraints to work within.
Many failed apps try to cram too many features in from launch.
Top of Form
Like what you're reading?
Get the latest updates first.
No spam. Just great engineering and design posts.
·
·
·
·
Bottom of Form
Common Mistake #5: Cramming in Design Features
Hopefully, rigorous wireframing will make the distinction between necessary and excessive functions clear. The platform is already the ultimate swiss army knife, so your app doesn’t need to be. Not only will cramming an app with features lead to a likely disorienting User Experience, but an overloaded app will also be difficult to market. If the use of the app is difficult to explain in a concise way, it’s likely trying to do too much. Paring down features is always hard, but it’s necessary. Often, the best strategy might be to gain trust in the beginning with a single or few features, then later in the life of the app can new ones be ‘tested’. This way, the additional features are less likely to interfere with the crucial first few days of an apps’ life.
Common Mistake #6: Dismissing App Context
Although the conditions of most design offices practically operate within a vacuum, app designers must be aware of wider contexts. Although purpose and ambition are important, they become irrelevant if not directed within the proper context. Remember that although you and your design team may know your app very well, and find its interfacing obvious, this may not be the case for first time users, or different demographics.
Consider the immediate context or situation in which the app is intended to be used. Given the social situation, how long might the person expect to be on the app for? What else might be helpful for them to stumble upon given the circumstance? For example, UBER’s interface excels at being used very quickly. This means that for the most part, there isn’t much room for other content. This is perfect because when a user is out with friends and needing to book a ride, your conversation is hardly interrupted in the process. UBER hides a lot of support content deep within the app, but it only appears once the scenario calls for it.
Who is the target audience for the app? How might the type of user affect how the design of the app? Perhaps, consider that an app targeted for a younger user may be able to take more liberties in assuming a certain level of intuition from the user. Whereas, many functions may need to be pointed out for a less tech savvy user. Is your app meant to be accessed quickly and for a short period of time? Or, is this an app with lots of content that allows users to stay a while? How will the design convey this form of use?
A good app design should consider the context in which it is used.
Common Mistake #7: Underestimating Crossing Platforms
Often apps are developed quickly as a response to changing markets or advancing competitors. This often results in web content being dragged into the mobile platform. A constant issue, which you’d think would be widely understood by now, is that often apps and other mobile content make poor transitions between the desktop, or mobile platforms. No longer can mobile design get away with scaling down web content in the hope of getting a business quickly into the mobile market. The web to mobile transition doesn’t just mean scaling everything down, but also being able to work with less. Functions, navigation and content must all be conveyed with a more minimal strategy. Another common issue appears when an app developing team aspires to release a product simultaneously on all platforms, and through different app stores. This often results in poor compatibility, or a generally buggy, unpolished app.The gymnastics of balancing multiple platforms may be too much to add onto the launch of an app. However, it doesn’t hurt to sometimes take it slowly with one OS at a time, and iron out the major issues, before worrying about compatibility between platforms.
Common Mistake #8: Overcomplicating App Design
The famous architect Mies Van der Rohe once said, “It’s better to be good than to be unique”. Ensure that your design is meeting the brief before you start breaking the box or adding flourishes. When a designer finds themselves adding things in order to make a composition more appealing or exciting, these choices will likely lack much value. Continue to ask throughout the design process, how much can I remove? Instead of designing additively, design reductively. What isn’t needed? This method is directed as much towards content, concept and function as it is aesthetics. Over complexity is often a result of a design unnecessarily breaking conventions. Several symbols and interfaces are standard within our visual and tactile language. Will your product really benefit from reworking these standards? Standard icons have proven themselves to be universally intuitive. Thus, they are often the quickest way to provide visual cues without cluttering a screen. Don’t let your design flourishes get in the way of the actual content, or function of the app. Often, apps are not given enough white space. The need for white space is a graphic concept that has transcended both digital and print, thus it shouldn’t be underrated. Give elements on the screen room to breath so that all of the work you put into navigation and UX can be felt.
The app design process can be reductive, rather than additive.
Common Mistake #9: Design Inconsistencies
To the point on simplicity, if a design is going to introduce new standards, they have to at least be consistent across the app. Each new function or piece of content doesn’t necessarily have to be an opportunity to introduce a new design concept. Are texts uniformly formatted? Do UI elements behave in predictable, yet pleasing ways throughout the app? Design consistency must find the balance between existing within common visual language, as well as avoiding being aesthetically stagnant. The balance between intuitive consistency and boredom is a fine line.
Common Mistake #10: Under Utilizing App Beta Testing
All designers should analyze the use of their apps with some sort of feedback loop in order to learn what is and isn’t working. A common mistake in testing is for a team to do their beta testing in-house. You need to bring in fresh eyes in order to really dig into the drafts of the app. Send out an ad for beta testers and work with a select audience before going public. This can be a great way to iron out details, edit down features, and find what’s missing. Although, beta testing can be time consuming, it may be a better alternative to developing an app that flops. Anticipate that testing often takes 8 weeks for some developers to do it properly. Avoid using friends or colleagues as testers as they may not criticize the app with the honesty that you need. Using app blogs or website to review your app is another way to test the app in a public setting without a full launch. If you’re having a hard time paring down features for your app, this is a good opportunity to see what elements matter or not.
The app design market is a battleground, so designing products which are only adequate just isn’t enough. Find a way to hook users from the beginning - communicate, and demonstrate the critical values and features as soon as you can. To be able to do this, your design team must have a coherent vision of what the app is hoping to achieve. In order to establish this ambition, a rigorous story-boarding process can iron out what is and isn’t imperative. Consider which types of users your app may best fit with. Then refine and refine until absolutely nothing else can be taken away from the project without it falling apart.
Designing work
for Mobile devices is increasing day by day due to changing habits &
behavior of human with respect to mobile phones & devices. This new and
more work for designers giving a challenge i.e. giving better experience with
their mobile solution. Goals for each design team are focus on preparing world
class mobile solution & deliver better user experience. In this article I
have tried to give light on a different angles on mobile phone usage which can
affect overall user experience. All these points fall under Strategy, Research,
Design & test, which are important part of UCD process. Before designing
for mobile, let’s understand the usage pattern of mobile phones.
Pattern of usage
Understanding
usage pattern is really important before designing any mobile solution because
this affects majorly. Today people use mobile phones not only for talking &
texting but for number of reasons. Checking status, notifications, chats,
listening songs, playing games etc. while running on park, walking on roads,
waiting at bus stops, sitting on toilet seat, standing inside lifts are common
some scenarios now a days. Interaction with mobile phone is more complex than
using a laptop or desktop in many sense especially ergonomically. People use
mobile while sitting on cars, bus etc. where objects are shaking due to pot
holes on roads. People use mobile in shopping mart while carrying shopping bag
in one hand & using mobile in other.
Design for outdoors
It is really an
important aspect for designing mobile solution i.e. Design for outdoors.
Outdoors can be treated as environment where user uses mobile solution. Environment
have different factors which can affect experience like sun light, background
noise etc.
Testing of design
Usability
Testing & development testing should also be performed in mobile friendly environment
(outside). Some important testing variations are given below,
Slow Network -Test mobile app in slow internet
network or in network failure. Sometimes it happens when someone goes inside
huge building or lift network get disconnected. If that user is in between some
process then app should save user tasks & continue when network comes
again.
Background sound –When your app is having audio
notifications or voice based interactions, then one should test app audio based
features in different background sounds.
Light conditions -Test your app color scheme in variety
of lighting conditions (like in sun).
Color Blindness -Test your app color scheme for color
blindness.
At last some final thoughts, mobile
devices are becoming powerful in terms of technology & adoption so design
solutions should also meet the expectations. Taking care of User’s behavior,
task, technology along with mobile environment (environment meaning outdoor,
lights, sound etc. factors) are really required for designing for better
experience.
%20in%20India.png)
