What Is Mobile UI?
OK. First the short answer:
Of course, Mobile UI stands for Mobile Interface Design.
In essence, it's your front end app design.
It's your visual layout, your navigation, your colours, your design features - it's all these and more. It's how your users interact and experience your app in real time.
In mobile UI, the 'u' stand for user.
Always design for the you.
This is user-centric design.
Remember, th most successful apps are always built for the user.
Now back to our key topic: What is Mobile UI?
Now for the long answer!
In getting to know more about the 'Mobile User Interface', we'll be asking the following questions:
What are the elements of Mobile UI?
What is the Mobile UI design process?
What are the most popular Mobile UI prototyping tools?
What are the key responsibilities of Mobile UI designers?
Now before we get into things, lets look at a quote. This one is from Aristophanes.
He said, "You cannot teach a crab to walk straight."
Aristophanes was an Ancient Greek playwright. He lived circa 450 BC - 388 BC. He is known as the greatest representative of ancient Greek comedy - he's funny, bold, outrageous and big on fantasy.
With "You cannot teach a crab to walk straight" - Aristophanes, in his own funny way, compares crabs to people.
He knows that crabs will always be crabs.
Yes, crabs are experts at moving sideways - but due to the limitations of their physical nature - they can only ever move sideways. They can not 'try harder' and retrain to crawl forwards.
Like crabs - we, as people, have a discrete set of frameworks that we operate within.
For effective mobile UI design - developing a keen understanding of these frameworks is key.
Deliver value, not complexity.
Understand people. ('U' isn't just for 'user' - it's also for 'understanding')
Get to know your user.
Strive to understand them better.
Help them in real ways.
The over arching goal here - is to deliver effective, genuine service.
Positive business outcomes are best achieved by helping others.
Give is gain.
So, what are the elements of Mobile UI?
Mobile interface design begins as a visual mockup within a series of flow chart wireframes.
These visual screen mockups are the starting point for your user interface design.
But take a step back - before you get into your mobile ui design - you have to establish your brand.
Does every app need a brand?
Yes.
Your brand is way more than your logo. It's your vision, your 'big picture', the reason why you do what you do - with a laser point focus on the person who matters most: your user.
With so many apps available for download on the app stores, standing out from the crowd has never been more important.
Great branding - and great visual design - is what will set you apart from competitors. Be you. Forget the rest. Stay true to your user.
Get heard above the noise.
So - the first step of any app project, is always brand design. Through this process, your brand 'style' will be developed - this will include your app's logo, your unique brand colours, typography styles, iconography and more.
Don't underestimate great icon design. First impressions matter. Make sure your app's main icon design looks great visually and hits the target with your use.
So, what other elements are there to Mobile UI?
Apart from branding, the 'mobile user interface' design process - deals with the following elements:
Visual Layout
Navigational Hierarchy
Menus & Typography
Wireframes & Mockups
Calls to Action & Usability Testing
Clickable Prototypes
Real World Testing, Gaining Feedback with an Ongoing Commitment to Improving User Experiences
Now, Let's talk about the process of mobile ui design.
1. User Research - mobile interface design always begins with your user. What are their needs? What are their goals? A great mobile experience must be built for your user. It's design for the real world.
2. Flow Charts, Logic & Calls to Action- What features does your app offer? How will you move logically from one screen to the next? Where will you click? What do you want want from your customer? What are your calls to action located?
This is your mobile's work flow.
Above all - consider how will this all come together to deliver a seamless user experience.
The second stage of mobile ui design, turn to flow charts to built a logical flow into the app that is user friendly.
3. Wireframes & Mockups - This is your roadmap. Visual mockups, app architecture and detailed wireframes are now developed - to map out what your app looks like across every screen, and to logically describe how it will work.
You will see your branding come to life - as your logo, icons and company colours are front and centre during this design stage.
4. Clickable Prototypes - A clickable prototype is essentially a clickable mockup of your app, viewable on your mobile device.
You will see precisely how your app will look and function in regards to usability and visual appeal - prior to beginning development.
5. User Testing and Revision
Get as much honest feedback as possible here. Where relevant, take on board suggestions and comments - and revise the app as required. But remember, always stay true to your own vision!
Changes are best made before development commences.
What are the most popular Mobile UI prototyping tools?
A clickable prototype ensures that your mobile user interface is thoroughly tested before starting back end development.
You get to experience you app as a user. It's like walking through a virtual model of your house, before it is even built.
The Top 6 Mobile App Prototype Tools
Go from a static design to a animated app experience - without any code! Fully interactive, high fidelity rapid prototypes that can be easily shared with test users.
Adobe Experience Design CC
UXPin
InVision – This is currently the prototyping market leader here.
Proto.io
Marvel
Balsamiq
And finally, what are the key responsibilities of mobile ui designers?
Overall, a professional mobile ui designer is responsible for the front end design of your mobile application.
They liaise closely with you, as the client, during front end development stages, and are responsible for user research and testing strategy. The emphasis in on design skills - not coding skills.
As people - we are primarily visual learners.
Visuals matter.
Aim to drive visual engagement.
Like the crabs that can only go sideways - we, as people - prefer to interact with apps that offer visual appeal.
But visuals must be met with substance.
Consider not only how your app looks, but also how it works - and most importantly how it helps.
These are the 3 key elements in that underscore every successful mobile UI design.