In Part I, we briefly discussed the key concepts that a novice UI and/or UX designer should kick-start their journey with. In the second part of the series, we will climb one step up the ladder and talk about essential learning points that you can pursue once you are well-versed with the basics.
Minimizing the user’s cognitive load
Cognitive psychology deals with processes of the human mind including perception, memory, and problem-solving. Cognitive load is therefore the psychological effort required to learn new information. For designers, it is the mental power needed to process or use a product.
Now, why is it so important? Simply because, if the sheer volume of information/knowledge needed to operate a product exceeds the user’s ability to process it, it is a major setback for the creators. In such a scenario, we might say that the cognitive load of the product is high.
Although it is physically impossible to manipulate the user’s processing capabilities, the motive lies in getting to know their limitations and utilizing that knowledge to minimize the requirement of processing power altogether. A cognitive load can be caused by instances ranging from the user taking note of new information while trying to achieve a result through your product to random use of font styles and sizes!
To prevent such occurrences, a product should be designed practically and free of clutter; it may also support the user’s short-term memory by implementing solutions like making a visited site visually different from a non-visited site. Since recognition requires less processing power than remembrance, humans are better at recognizing something rather than remembering it. Minor facts like these will not only help you learn to create an awesome design but make it user-friendly in the true sense.
Dive deeper into the realm of cognitive psychology:
- https://medium.muz.li/human-cognition-and-its-effect-on-design-ed23cfff7f18
- https://uxdesign.cc/the-application-of-cogntive-psychology-to-user-interface-design-81599ad7fb55
Knowing interaction guidelines for iOS and Android
Human interaction guidelines largely talk about rules of visual design including windows, icons, and layout style, and how to make application interfaces learnable and intuitive across operating systems and environments. At times, they also describe the workings of user input and interaction, ways to organize an application or write user-interface text. Moreover, they help maintain visual consistency among common elements right from simple buttons and icons to more complex components like dialog boxes.
Nowadays most popular applications are designed for both iOS and Android. While Google follows their very own Material Design philosophy for developing Android apps, iOS uses Apple’s Human Interface Design guidelines. With different sets of philosophies, these giants have quite different approaches to design. For instance, on iOS, the primary call-to-action button is usually placed on the upper-right as opposed to Android’s floating button at the bottom-right corner of the page.
There are scores of other distinguishing features between the two creators which create varied scales of usability. When you are familiar with their respective guidelines, it becomes easier for you to create your design in a way that will support the expectations of either of the platforms’ users.
iOS vs Android UI Design:
https://learnui.design/blog/ios-vs-android-app-ui-design-complete-guide.html
Human Interaction Guidelines:
- For iOS: https://developer.apple.com/design/human-interface-guidelines/
- For Android: https://developer.android.com/design
Solving design problems with design patterns
Design patterns are time-tested solutions to common, recurring problems. They typically include descriptions or templates that can be utilized in multiple situations. Do not mistake them for finished design pieces that can be directly transformed into code, because they are not. From a structural perspective, design patterns are documented using templates that identify the required information to understand problems as well as the solutions that can be implemented.
Apart from offering proven solutions, they also ensure efficient communication among designers. How? Well, once you are thorough with the nomenclature, it is easier to picture a piece of design mentally when your teammate refers to the name of a pattern used to solve an issue while you are discussing system design!
In the long run, design patterns even allow for the development of highly cohesive modules without the need for extensive coupling by isolating the variability within the system requirements. This, in turn, makes the overall system easier to maintain. The best thing about design patterns is that they can be improved over time, making them more feasible than ad hoc designs.
Learn more about design patterns here:
https://ui-patterns.com/patterns
Building flawless Information Architecture
Information architecture (IA) is the science of organizing, structuring, and labeling the content of websites, applications, and software in a way that enhances usability and navigation experiences for users. IA has, therefore, become the fundamental study in user-centric domains including design and software development.
A product’s design framework includes visual elements, functionality, interaction, and navigation, all of which are directed by IA principles. Without the implementation of proper information architecture, even captivating design components can act up. Also, sloppy content structure hampers navigation, leading to negative user experience. This is where IA steps in. It functions as a blueprint to your design structure which in turn can be used to produce into wireframes and sitemaps of the product. As a UX designer, you can use them as base components for a seamless navigation system. The end result? Users can easily find information and perform tasks using your application.
In order to construct a coherent information infrastructure, it is recommended that you start with its prime components:
Organization systems – These involve the division of information so that users can easily presume where to find a particular piece of information.
Labeling systems – These systems center around the presentation of data. Complex designs with bulks of information can very well confuse users. Labeling allows a large amount of data to be represented in a few words for users across expert levels.
Navigation systems – These provide sets of actions for users to navigate between pages across an application or a website to perform various tasks. Efficient navigation systems showcase the structure of the information hierarchy and clearly designate the user’s current location within the application.
Searching systems – As the name suggests, these systems are used to help users search for the data within an application, be it mobile or web-based. Searching systems are crucial for digital products consisting of large volumes of data since there is always a chance of users getting lost within the application. In such scenarios, tools like search engines and filters will help them find content and give the designer an idea about how the information will look post a search.
For more comprehensive details to IA:
https://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
Once you are convinced that you have passed the beginner’s level, take your time to focus on the above concepts, which are of course, a little more complex. You’ll then be one step closer to becoming a design ninja!
Graphic credits: https://www.freepik.com/