5 Tips and Tricks to Quickly Deliver a Prototype
This is my first post; pardon me if I make any mistakes.
I’ve been involved in Orbital for almost four years now. For those who are unaware of what this program entails, you can find more information about it through this link. What kept me going back as an advisor, instructor or TA is the opportunity given to share my knowledge as a UIUX designer. One thing that I’ve noticed with most students is that they tend to face the problem of decision fatigue. They spend too much time debating on which design fares better rather than working on the actual prototype itself.
Given the many guidelines on the internet, it can be difficult to decide which design principles to adhere to, as sticking to all of them is impossible. The post seeks to address this problem. I have specifically chosen five UIUX guidelines to talk about in this post. I find them to be highly practical as I follow them 90% of the time when designing for a product that needs to be quickly delivered.
Before I begin, I would like to regurgitate that UI IS NOT UX and vice versa — I often lumped these two terms together, but do take note that they have very different meaning as mentioned in this article.
TIP #1: 6:3:1 RULE
When comes to designing an interface, be sure to use a consistent set of colors. Recall that Jakob Nielsen once spoke about consistency and standards when designing. You do not want to confuse your users with too many colors. As a rule of thumb, try to sticks to three colors, i.e., primary, secondary and accent. Designers usually do not have much trouble with this; they tend to fret over color proportion instead. There is an old interior design rule that can be extended to modern application design that many are familiar with. It suggests that you pick three different colors and use them in the ratio of 60%, 30% and 10% to bring balance into the composition.
The rule can be interpreted as follows:
- 60% of your interface should be made up of your primary colors. The primary color is your dominant color and is used for large elements like the background of your interface.
- 30% of your interface should be filled with the secondary color. It is meant for common widgets such as the navigation bar and side menu. Some designers prefer to work with two secondary colors, allocating 15% to each to differentiate the widgets. However, I prefer sticking to one color to avoid confusing my users unless I am very proficient in using colors.
- The remaining 10% is your accent colors. DO NOT USE THEM FREELY. Use them strategically. The color is mainly for smaller elements which require heavy emphasis. These include your buttons, CTA, and icons — anything that is critical to your app conversion.
Here’s an example of how this rule works:
Pretty neat huh? However, be careful with your choice of colors. Make sure you have at least one pair of contrasting colors to provide sufficient visibility for your users. Also, ensure that your colors harmonize well with each other. The easiest way to do this is to use a color scheme generator — One of my favorite tools to do this is coolors.co.
TIP #2 SELECTING FONT SIZES
Designers tend to neglect the fact that font sizes can be as equally powerful as colors in representing information. As the number of colors is confined to the 30–60–10 rule, you may need to resort to using font size to differentiate between elements. Like colors, each font size corresponds to a different degree of emphasis. I like to work with five categories of font size: extra-small, small, medium, large and extra-large. Each font size is calculated by adding an offset to an exponential number of a fixed base. The offset gives you a default size to work with while the exponent gives you a consistent scaling from one size to another. The following is a set of font sizes used by one of my prototypes, calculated using the formula (12 + 2^n).
Here’s couple of benefits of using a standard set of font sizes:
- Improves data consumption through better legibility
- Creates consistent user experience
- Eliminates decision fatigue when designing
- Consistent scalability
The same concept can be applied to spacing and sizing your element as an alternative to a n-pt grid system. However, make sure that you use even number like 10 to size and space your element to accmodate a wide variety of devices.
TIP #3: STORYBOARD
If you can choose only one technique to illustrate your user flow, my suggestion is to go with a storyboard. A storyboard is a combination of every method that attempts to demonstrate how a product achieves a user’s goal. It is defined as a “story communicated through a sequence of images that chronologically maps the story’s main events.” It is more powerful in conveying an idea than just words as pictures are known to speak a thousand word. The true beauty of a storyboard lies in its ability to break down a complex idea into smaller steps — allowing designers to explore the user experience more in-depth. By narrating a user story through a series of pictures, designers can predict how a user would interact with the interface at many instance, revealing any flaws and misassumption in-between.
Before attempting to draw a storyboard, it is important to first define your user goals followed by your product features — otherwise your storyboard will easily lose focus. A good storyboard maps back to the user’s objective. One way to do this is start off by visualizing the first and last step followed by the intermediate steps required to accomplish a task. That way, you are doing yourself a favour by setting up the conditions necessary to think in the right direction.
Last but not least, only include details that matter in your drawing — the purpose of a storyboard is to visualize your user journey and by no means, an assessment to your drawing ability.
TIP #4: USER TESTING
The fastest way to test your prototype without incurring excessive cost is to use a third-party application. My colleague had recently introduced me to this online tool known as Maze. It allows designers to perform user testing online. Yes, you heard it right: online. How it works is that it imports your mock-up from sites such as Invision and Marvel to create specific user tasks that can be shared with others via a public link. The first task is free of charge, but the subsequent ones require money. But overall, it provides you the analytics needed to assess the performance of your prototype. It even deploys heat map technology to determine the number of clicks in various regions of a screen.
However, for someone who seek rigor in user testing, the above method might not be suitable. In that case, you’ll be are better off using statistical test to evaluate your prototype. I‘ll be demonstrating how to go about doing this using the theory of HCI in the future — do lookout for it!
TIP #5: EDUCATE THE PEOPLE AROUND YOU
Nothing beats getting things done quicker than ensuring that everyone is on the same page. Although this advice is not as technical as the others, I cannot emphasize this enough due to the number of misunderstandings that could arise from misusing terminologies.
Different people have a different interpretation of the same technical term depending on their background. It can be challenging to convey a specific design when working together on the same project. I recalled one instance when working with a client as a freelancer. The person requested for the “thingy that can be slide left and right” on his mobile app. It took me quite some time to realize that he was actually referring to the switch button. Shocking right? Well, I do not blame him as he is not accustomed to using design vocabulary on a day-to-day basis. However, this does not give you an excuse not to educate the people around you. Even if you’re unable to meet them on a daily basis, be sure to explain any jargons that people might use at the start of every meeting. Miscommunication is probably the last thing you want to experience when faced with a tight deadline. Imagine discovering that your design is completely off from what others envisioned when significant progress is already made — not only does it cost you time but it also undermines your ability as a designer.
Here are some glossaries which I find to be helpful:
UI: https://semantic-ui.com/introduction/glossary.html
UX: https://uxmastery.com/resources/glossary/
BONUS: COLOR VARIATIONS
As this is an extension to the first two tips, I decided to add this as a bonus tip instead. So, what happens when you run out of colors and font sizes to differentiate your components? Don’t forget a color comprises of hue, saturation, and value; modifying these values will allow you to obtain different variation of the same color. However, color variations are hierarchal and commonly used to represent a different state of the same element. Human cognition is designed to group similars color and associate them with a particular meaning. When applying a color variation to a component, make sure that it has some form of connection to other components that uses a different color variation as well.
So how do we modify a color to get good variations? As a general guideline, decreasing a color’s brightness and increasing its saturation will increase its intensity while doing the opposite will lighten the intensity. Erik D.Kennedy had written a splendid article on how to go about doing this.
Combining this with tip #1, you can quickly do up a style guide like this:
CONCLUSION
If you were to follow all the above tips meticulously, you can expect to achieve something like this:
The tips that I’ve shared are what works for me; you may find some of them useful and others to be irrelevant. It is up to you as a designer to make sense of what is best for your product. However, I must stress the importance of working with a set of guidelines as it enforces some consistency over your designs.
*I’ve started working on a portfolio to showcase some of my best work as a designer, feel free to also comment about it in the section below.
