UX process, part 3 of 4: Wireframing & UI design
Everybody thinks that the designing process starts when we think about the look and feel of the object, but that’s not the truth. The designing process begins before deciding the look and feels of the object. It starts with the Wireframes. The wireframes do not deal with the design of the actual screen but are low fidelity mockups, which means having an arrangement with low details & is much more simplified than the actual screen design. They are not supposed to be attractive. It is more simple where there is no design color, no typography, no pictures. It is just like a blueprint made by architecture for the project. Wireframes just decide which element should go where & with what size & space. Now comes the question of why do we need to make wireframes. The reason is that wireframes give us the chance to focus on more fundamental questions about the layout of a page without getting caught up in a lot of details. If you think you can go for everything at once, I suggest you go and try because until you don’t realize that doing everything at once will waste your time and energy and take forever to come up with a design.
When you go shopping for groceries, do you go clueless about what to buy? Do you have things in mind, or you might have a paper list or mobile note & Then you go to buy stuff to save your time and energy. Here also, if you do everything at once it will take a lot of time just to decide the typography & its colors, then you will keep thinking that according to the pictures, it will take forever to just come up with the layout. Building Wireframes is just like writing and framing a list of elements that will decide where to go. That layout that you will be working on taking as a base. With wireframe, just have to focus on big picture decisions like where will the logo come, on the top left; there are these many columns for the so & so category, which will be made in the middle of the page; this is where CTA should be.
Now we don’t know With what screen our user is interacting. Is it a laptop? Is it a smartphone? Is it a tablet? We don’t know about it. So if we don’t know about the screen size of our users, which size should you design for? I would suggest preparing for two dimensions because the comfort of availability of users generally will be at the desktop or smartphone; you don’t have to design for every screen size. Choose any desktop version that can be Mac book, Mac-pro, etc., or anyone smartphone. It can be Android, iPhone, pixel, anything. But if a situation comes where you have to choose any one screen size, always try to prefer a smartphone because the world is going more digitalized and advanced, but at the same time, everybody wants to carry the world in their pockets. Every individual might not have a desktop with themselves but will have a smartphone because it has a pocket-size comfort.
One thing that has to be pointed out is Scrolling. Scrolling is a natural act for users, but some people believe that less scrolling is always better, but that only depends on what kind of content you’re dealing with. If you can present the content in less length, go for that. Otherwise, content can be lengthy because scrolling is not the problem; the content is. Content should be engaging enough for users that they can scroll. Every social media is about scrolling because it is that engaging & exciting for users. While you focus on wireframes, ensure you have a navigation chart or sitemap all figured out already. Because when you build a website, there are so many things you can do so, you have to organize your navigation. You don’t want your users to take time to make decisions when they visit your website. First, decide what is going to be your primary navigation & then show it accordingly on your website.
So, here you can see the main navigation implemented into the wireframe. So this is how you decide that my main navigation bar will be in a horizontal / Vertical way. After main navigation, choose where the subsection or secondary navigation is going to be. When you hover, it could be a dropdown menu, or maybe you can have another whole section for placing the secondary navigation bar. It is upon the designers. How you want to putSo every them to create visually exciting but navigation bar should be very loud and clear. Do not mix up primary & secondary navigation items when we are down to the hierarchy road map of the navigation system. There is one more type except for primary & secondary navigation, i.e., Utility Navigation. These consist of essential parts of the site, but those are not directly parts of the site’s main content. For example, social media icons, shopping carts, or Account login icons on the top right corner or search bar in the above picture can be considered utility navigation because they are important but less than primary ones. Many navigation passages can be made for a website to categorize or organize them as primary, secondary & utility would depending on the idea or goal of the website. But too many navigation paths might confuse the user,& they might feel lost. While designing a website, make sure that you keep them informed about what page they are on by either highlighting the button of the page or might put some heading. Adding to this, you should always have a place where users know that they can go back to the page where they were before by clicking this. It can be the back button, logo, home button of the website, etc.
There are some common form elements that you should know about when you build wireframes. Forms here are the way to gather user input.
Some of the form fields are :
1. Checkboxes — it lets users select one or more options from a pre-defined list of options.
2. Radio Buttons — it lets users select only one option from a pre-defined list of options.
3. Dropdown — Lists allow users to choose only one option from a list, but the presentation of options differs from radio buttons.
Generally, if the list consists of many options, then the drop-down menu is used, and if the list is short, radio buttons are used.
4. Text field — It allows users to type in something for short — free form answers.
5. Text area — It allows users to type in something for long — free form answers.
6. Number stepper — allows people to choose a whole number in between a limit of maximum and minimum numbers according to the context.
7. Slider — It also enables users to choose between two extremes of something, but it doesn’t only have to be a number; it can be feelings expressed in words as well.
8. Date picker — It allows users to select a date in the form of a calendar & then represent it in a text box.
9. Toggle Switch — These are used for binary options like YES or NO; On or OFF; TRUE or FALSE.
10. Buttons — buttons allow users to click on them to trigger an action in return.
Many other elements across the websites get quite a bit more complex.
Let’s discuss wireframes tools. Initially, I would suggest going on a pen & paper or whiteboard as it is easy & you can draw it as many times you want while you brainstorm layout ideas, build & update your thoughts quickly with ease of satisfaction. But you should make sure that after pen & paper, you end up designing it in the computer as well because a pen & paper can never provide the natural feel of desktop wireframe. Plus, clients would be more interested in digital wireframes rather than pen & paper ones. Pen & paper is for your team discussion or maybe just for yourself. There are many tools you can use for creating digital wireframes -
· Illustrator
· Balsamiq
· Figma
No matter what tool you decide to use, remember that it’s a low fidelity mockup & you simply have to focus on designing a layout in this phase.
[To be continued…]
This concludes the third part of this article. In the next one, I’ll talk about Digital prototyping as a part of the UX Process.
