In my previous article (My dear fellas) I captured the high-level differences between UI and UX. Always remember, UI has a form (mobile, desktop, watch) and UX is formless. A weak UI may do the job, but a poor UX will never work. Think of UX as a story and UI as drawing revealing that story. You must have an engaging story to create the appealing drawing.
Many of us are passionate about the user interface. The interface is visual and has a form associated with it. The carefully crafted interface looks appealing and creates an awesome first impression.
But have you been in a situation where your beautifully crafted interface is not helping the product? A product manager asking you to make changes, which starts making your beautiful work look ugly? I have been in similar situation. Many times!!! And, I updated the mocks immediately and waited for results. Another thing I did was, turn to Dribble, Behance or even apps, websites to find an example that is beautiful and catering my needs.
We all get inspired by other designer’s work. There is nothing wrong in getting inspired and trying to reproduce it. Rather, do you know; copying someone’s work is a method to learn new things? If you are willing to explore this method to learn the interface design, I would recommend following three steps.
Separate design layers and select the appropriate
What do I mean by that; develop a skill to see design layers. I often check which layer was most appealing before adopting someone’s design. If the design meets my needs, then I move forward. A design usually can be split into 6 layers. Let’s take the above example understand the layers.
- Components: In above example, there are three main components. Two input fields and one button. The keyboard helps the user to input data and the title, and description sets the context of the task.
- Data exchange: When the user taps on the button, the application sends data to the server to check if the account already exists in the database. Depending on the result server sends information back to the application.
- Information hierarchy: Technically the title and description do not play the direct role in creating user accounts. It helps the user to understand the context. It’s important to arrange information in the order that will keep the focus on the task.
- Interaction design: Notice the screen A4; create account button is visible only when the user types the password that meets requirements. This interaction helps the system to prevent an error. Showing components only when required contributes keeping the focus on the task.
- Visual design: Compare A1 and A4, A1 feels more straightforward and clean and communicates task very clearly. The font size used for user input helps to prevent error. Use of color is very minimal (personal aesthetic choice) focusing on the primary call to action.
- Motion design: There are many ways we can animate these components. Always remember animation can help communicating hierarchy but adds the delay as well. Our interface is not a Disney film. Here is an awesome article by Sophie Paxton. She explains the difference between animation and motion design.
Check if that interface fits in your story
As I mentioned above, UX is a story, and UI is a drawing. When you refer to some random mock from Dribble, you are looking at a picture without understanding what has happened before or what will happen next. The context of the story is missing.
For a sign-up form, we need to understand where our users are coming from and where they will go next. We need to understand user’s motivation and intent. Just copying the visual style and animation is not enough. That could do more damage than help.
Understand why and not just how
It is super easy to copy interface. There are tools that make copying super easy. You have to step back and understand what the designer might have thought before executing the design. Let’s look at the loading animation examples.
- Fetching the data based on user interaction (example A): Depending on the network connection and the data size, process may take longer to finish. By showing a subtle repeating motion design is communicating the process.
- Refreshing the data based on user interaction (example B): The system is looking for the changed data since the last update. This process is time-bound unlike example A. The animation may motivate the user to refresh the data which works in favor of the product.
- Blocking user from moving forward (example C): The system may prevent further activity unless the account is created. The process has many endpoints e.g. Account may already exist, or system fails to create an account. In such scenarios, it is helpful to prevent further tasks by blocking the user. We can though replace spinner with unique brand aligned motion.
There are more interesting examples out there. The bottom line is, understand the end to end process and not just details of the interface.
Nothing is original, we all inspire each other. We copy style, behavior, appearance to make it ours. The real skill is knowing what to copy, from whom to copy and not how to copy.
“I invented nothing new. I simply assembled the discoveries of other men behind whom were centuries of work … progress happens when all the factors that make for it are ready and then it is inevitable.” — Henry Ford
No Comments.