How to Create Good UX-UI In Your Android App
Though I always refer myself as a learner who needs to learn a lot in android app development, there are some Important things that I feel I can share about Android App Development.
Before We go…..Understand the difference between UI and UX -
UX means User Experience, it is about what kind of experience your App give to your User.
UI is User Interface, It is what you see in your App- Appropriate Size of widgets, Use of Correct Colours, Elevation, Font, Images etc.
Even Though Some Apps Provide a very good looking UI with fancy buttons, They Miss Important Parts of User Experience(UX). Provide What your User Wants in a Fancy Manner is good but Providing Cool Widgets that your User Does not wants leads to a Bad User Experience.
In the Store Listing Screenshot of my App, you can see the Main Activity of my App. It’s the Home Screen of my app, where the List of Courses is Shown. As an app developer I want to try as many different Tweaks as I can but If You want to create a good UX then must think of your app as a User. A user who want to view courses First will not like fancy and complicated widgets at home screen which adds beauty of app.
No User Complains About What you could have added to app
Your user will never write a review and tell you that if you had Included THAT Animation then I would liked it. User Care for What Services your app gives and how easily they can get access to it.
The Home Screen in this app can Also be Improved further by adding a Recently Opened Courses. So that Users can go to courses as quick as possible.
Why Animate Things?
From our above discussion it seems clear that we should not delay the Process between User and Service For Good UX. It means Animating things is not a good practice since it delays the process. So why Animate?
Here is the Reason why, Animating specific things which user does not Uses Often But is a Important Element of a Process ( For Example, Enrolling in a Course). When a User Enroll in a new Course they Expect Something BIG! It’s a great Opportunity to add Animations that Can Enhance the One- Time Experience of Enrolling in a Course.
You Can Learn More About Animations Here:
Creating a Good UI
Creating a Material Design App , You should take care of Material Design Guidlines and Important Properties. These Properties are must to Consider when building a Good UI. You Can Learn About These Properties and Guidlines Here:
Understanding these qualities of material will help you manipulate material in a way that's consistent with the vision…material.io
A Good UI Must Be Self Explaining. It means that the key to a good UI is Spontaneousness of UI. User Should Understand What The UI wants to Convey.
You Must Mindful of Some Basic DOs and Don’t DOs while building the UI:-
Never use wrong or misleading icons for basic functions like Share, Edit, Send, Navigation etc. Purpose of Every Icon Must Be Clear
Always Check your UI on Different Orientaions and Screen Sizes.
Never Use Customs Icons of Only one Size ( For Ex- only xhdpi), Get Graphics for Some Most Common Sizes
Animations are Cool but Don’t Put them without purpose.
Keep it Simple, Your User Did not opened the App to See dozens of Buttons and Vibrant Rainbow Colors.( Unless the App demands Complexity like a Stock Trading App). Just Keep It Simple, Show What is Needed and That’s It.
Never Leave Empty Spaces on Screen. I just Said Show What is Important and now Advicing to Never Leave Empty Spaces On Screen, So what does I mean. Simple, If Your App Does not have tons of Information to Show on Home Screen and after Showing what is Important there is Black Space Left on Screen Which Does not Look So Great, Then You Can Add Some Props to it that ads Extra Information and Also Make the Screen Look Good.
A good example is when you have to show a list of Winners But No One have Won Yet! What to Show then? An Empty Screen might not be a Perfect Solution. In this case you can show something in Background which adds Extra Information to the Context and Still looks Good.
You Can Learn About Empty States Here:
A list that doesn't contain any items, or a search that doesn't display any results, are examples of empty states…material.io
So that’s it For this Article, I will try add more Informative Stories in future.If You Liked this Article, Please Leave Some Claps to let me know.