User Experience Design | Interaction Design | Visual Design
  • 5 vital elements of a good User Experience Design

    Anand Bhusari

    When we talk about user experience design for the web, it includes everything, right from information architecture and visual design to usability, interaction design and prototype development. More importantly, user experience design is not all about design.

    As aptly quoted by Steve Jobs, “Design is not just what it looks like and feels like. Design is how it works.

    Therefore we can safely deduce that user experience begins way before users visit your website, download your app, or purchase your product, which makes it plausible enough to think user experience even before the product idea is conceived.

    At the same time, great user experience is hard to achieve. There’s no definitive formula to create a great user experience but there are some basic principles around user experience design that can work wonders.

    User-Experience-Design

    We’ve listed key principles in this blog post to broaden the perception of user experience design, which is still a widely misunderstood term, even within the design community:

    1. Information Architecture

    Information-Architecture

    Information architecture (IA) is the science of organizing, labeling, and classifying information within websites and intranets. The goal is to create a website structure that helps site visitors/users complete their tasks successfully and easily.

    Even an attractively designed and well optimized site can fall flat without user-friendly information architecture.  If the website visitors can’t find the information easily using the website navigation, they’ll leave your site and most probably take their business to your competitors.

    The following guidelines will help you in creating intuitive information architecture that meets the requirements of end users:

    Design from end users’ perspective

    Information architecture should be aimed at offering meaningful choices to users that are focused on completing a particular task. Keep your preferences aside while designing information architecture of your website.

    The best way to do this is by conducting research of user needs. Unless you know your target audience the website will not serve the business goals and user expectations.

    Define website goals

    In addition to knowing the target audience, a website should also have a clear purpose, whether it’s to sell a product, inform or educate people, and so on. The entire IA of a website is driven by the goals you want to achieve through the site.

    For example, if the goal of a website is to get visitors to purchase products, the content should be organized in such way that leads visitors effectively toward that goal. It’s like creating a step-wise path to a destination.

    Apart from the primary goal, there can be subsets of goals within a website, which is absolutely fine. However, these all should be weaved seamlessly together to work collectively toward meeting the primary goal of the website.

    Uniformity

    Following uniform design plays an essential part in creating ideal information architectures. Sticking to a same pattern for navigation layouts will make it easier for users to navigate through the site.

    Inconsistent information layouts tend to confuse visitors and force them to leave the website. The end result would be a lost conversion opportunity, which eventually impacts the business bottom line.

    Organize website content

    The way the content is organized will have a direct impact on users’ ability to find and manage the information on a website.

    It doesn’t matter if you are redesigning a website or building it from scratch, the structure and classification choices should be made after conducting an in-depth content inventory, building wireframes and sitemaps.

    Having a visual structure of the content will aid the accurate organization of information across the site.

    Navigational Schemes

    The navigation schemes of the website should help visitors easily make their way through the site. Taking care of the following guidelines will help make the navigational experience of your website a delight for the visitors:

    • Always make the visitors aware of their location within the site so that they can easily move forward or backwards.
    • Make the hyperlinks clearly distinct from content, and tell the users where they’ll reach upon clicking them.
    • Strive to keep the number of clicks to the minimum in order to reach a particular page or information.

    2. Interaction Design

    Interaction-Design

    Interaction design defines the structure and behavior of interactive systems. In this case, we’ll talk about interaction design for the web.

    However, interaction design should not be confused with graphic design. Though graphic design is a part of interaction design, it’s the combination of interaction + graphics that completes the interaction design.

    To be more specific, interaction design is focused around user behaviors, how they think and how they expect the user interface of a website to work.

    Here’s a list of key interaction design principles:

    Consistency

    Being consistence is the key to creating successful interactions between the website and the users. E.g. if the navigation menu is placed at different positions, looks different, or behaves differently across pages, it would lead to confusion.

    A basic element such as navigation menu should follow consistent placement, look, and behavior across the website. If it’s different on some pages, there should be a good reason for it.

    A website should be consistent in relation to the following elements of interaction design:

    • Consistent content, e.g. same words or phrases should not convey different meanings across different pages or interactions.
    • Typographic consistency, such as font face, font size, font decoration, etc.
    • Color consistency, including text color, background color, etc.
    • Consistent navigation menu design, positioning, and behavior.
    • Consistent looking hyperlinks.

    Perceivability

    Website users should be able to perceive interaction opportunities within a website. Provide visible clues to users about when to start an interaction and identify interaction signals. Using different calls to action text or graphics, such as ‘start a demo’, ‘download’, etc., will help users interact easily with the website. Following elements improves the perceivability of interaction:

    • Readable text
    • Easily distinguishable and legible icons
    • Hyperlinks with different colors from other content

    Learnability

    The interaction process should be learnable. It means that users should be able to use an interface, learn it, repeat it and remember the procedure for future interactions. For example in a word processor application like Microsoft Word, the icon with the letter U should do what it’s expected to do – underline text.

    Follow users’ past experiences to create interactions, and if you are trying something new, get feedback from some users first. Also, it’s a good practice to make the interaction as generic as possible so that it can be replicated across multiple interactions. Finally, use languages and symbols that users can understand easily.

    Predictability

    Make the interaction predictable. Users should have a clear picture of what a particular interaction will lead to and what are the steps involved.

    For example, while purchasing a product on an e-commerce site the user should be able to see a map or overview of all the steps he needs to follow, such as filling out personal information, delivery address, payment information, and checking out. Providing numbering for each step involved in a process, and displaying estimated time required to complete these steps will further increase the predictability of the interaction.

    Feedback capability

    In most cases, users don’t have much patience to wait for a particular request to process, and they often abandon interactions if they don’t have a clue what’s going on at the backend.

    Therefore, providing visual clues or text messages while a request is being processed will give the user a clear picture of what’s happening within the application.

    3. Usability

    Usability

    User experience is all about usability. User is the focal point of all user experience designs. As discussed earlier in this post, a website is as good as the usability it provides to the end users.

    For example, the consistent placement of search box throughout the website to make it visible and usable. Imagine the situation where the search box appears at different locations across the website, and users have to find it every time he navigates to a different page. It will have a negative impact on the usability.

    We’ve listed some key usability principles below that will help build a user-friendly site for your target audience.

    Consistency is one factor that is common in all user experience design elements. Whether it’s the interaction design, IA, visual design or specific elements, such as navigation menus, sidebars, hyperlinks, colors, or typography, consistency plays a big role in enhancing the usability.

    Multiple accessibility options

    Users should have multiple options to access a particular piece of information on your website. For example, a case study can be in HTML and downloadable PDF format, so that user can download it to view it later.

    Hierarchy

    Always aim at providing logical steps to reach particular information on your website. However, what may sound logical to you can be confusing to the user, therefore it’s a good practice to conduct user research and usability tests before deciding on the hierarchy of information.

    Though you won’t be able to meet the exact requirements of each user, you can be successful most of the times.

    Accessible content

    In terms of usability, accessible content is not only limited to categorization or labeling of content, it also refers to the structure of text, such as formatting, paragraphs, headings, font, etc. the objective is to make the content readable and accessible.

    Designers should keep in mind that users have different reading patterns on the web and on the paper. Web users don’t go through each word of content, they only scan the information. And they do it quickly. To enhance the accessibility of content, it should be organized in readable chunks that require less effort on users’ part to scan or read it.

    4. Visual Design

    User-Centered-Design

    To be more accurate, visual design should be focused around creating ‘user-centered design’ because design communicates a brand, interactivity, information architectures, workflows, and more to the end users. If the design doesn’t communicate all these elements clearly, it’s just filling the space.

    Like all other elements of user experience design, visual design or user-centered design is also a strategic activity. As I said in the beginning of this post, design is not all about the visual elements, it’s also about the ability of the design to interact with the target audience.

    A user-centered design should follow a well-defined process, as mentioned below:

    Strategy

    A design strategy is the first and most important step in a design process. It involves planning the design activities based on the objective and goals of a design project. Unless the design goals are not clear, the design will not deliver a good user experience.

    Requirements

    Design should never begin without a clear understanding of end users’ requirements, content and information requirements, and scope of the project. No matter how good the design is, if it doesn’t relate to user needs, it’s bound to fail.

    Information design

    Information design is aimed at the presentation of information in a way that users are able to understand it. It involves navigation schemes, table of contents, visual hierarchy, and more, so that end users can navigate easily through the information.

    Visual design

    Visual design is the final step in the user-centered design process that gives look and feel to the entire structure of the information platform. Here, the designers work on graphic elements of the design, such as typography, colors, textures, and alignment, to improve visual appeal of the information.

    5. User Research

    User-Research

    Market research is the most essential component in any user experience design initiative. It’s quite apparent that if you are designing for users, you must research user needs, requirements, and expectations. Therefore, market research or user research proves to be a highly effective tool that supports UX designers in making better design decisions.

    I’ve listed key market research guidelines that will help you in taking informed decisions about UX design.

    Driven by business objectives

    Though market research is essentially a user experience design practice, greater results can be achieved if business goals, in addition to UX considerations, guide the research planning and results analysis.

    For example, before identifying the target user segment to conduct research, find out which user segments are most relevant to your product.

    The crux of the matter is UX design principles should not be the only factors driving design recommendations. Identify and consider design approaches that would deliver greater ROI.

    Measuring metrics of success

    Any type of research or study is worthless if you can’t accurately measure the outcomes. Therefore it’s critical to measure design success to derive value from research activities.

    There are two ways of measuring UX design success – quantitative and qualitative. Quantitative methods include analyzing click-through rates, conversion tracking, and other analytical metrics. On the other hand, qualitative factors include assessing the ability of users to navigate the UI effortlessly, and their ability to complete a set of tasks.

    Qualitative research provides a deep understanding of user behavior, while quantitative research adds credibility to your research findings. Therefore, it’s advisable to use a combination of quantitative and qualitative techniques in measuring design success.

    Prototyping

    Prototyping involves evaluating a prototype with potential users to understand how a user interface or the web application looks and behaves in a real life scenario. A prototype gives you a good idea of how a particular product, website or an app will respond to user inputs, and what improvements can be made in product’s design to make it feasible.

    Prototyping proves to be a great way to keep a design project on track, and helps you predict a possible course of design activities.

    Focusing on research goals

    It’s very important to keep the focus on research goals while conducting user research. Conducting research won’t make much sense if the development team isn’t sure about the impact of research on final product.

    To keep the research focused on the design goals, it’s better to answer questions such as to what extent the research will influence the product design? Will it help improve the interactions with end users? Or you just want to conduct the research to justify your design approach.

    The Takeaway

    User experiences are driving the revenues across all size of organizations across the globe. If you think you can get away with only a captivating design, you are wrong. You have to think user experience from start to finish.

    If you keep these 5 elements at the heart of user experience design, your customers will be delighted and you’ll have more visitors converting on your websites.

    Again, there’s no sure-shot way to achieve great user experiences, but following the basics will bring you closer to meet end users’ requirements and your business goals.

    This entry was posted in Design, User Experience Design and tagged accessible content,content organization,IA,information architecture,interaction design,market research,navigation structure,prototyping,usability,usability principles,user centered design,User experience design,user experience design elements,user research,UX,UXD,visual design,website navigation, by Anand Bhusari.
    Author : Anand Bhusari
    Anand Bhusari
    Anand Bhusari heads creative group at Net Solutions and has been in this field from past 15 years possessing vast experience in print, web and mobile. Anand thinks simplicity is the key to design. He is apple fanboy and loves spending time with his family.

    Are you planning to build a web or mobile based solution?

    • We will love to listen to your requirements and discuss them in detail:

      Want to discuss any requirements or looking for a quote?

      Request Free Consultation

    7 thoughts on “5 vital elements of a good User Experience Design

    1. Jaswinder on said:

      An excellent & informative article!!!

    2. Ravneet on said:

      Nice article! I would also like to add:

      How do you know if your UX is actually working for your end-users? Start by conducting a UX audit that captures the sequence of interactions your customers need to take to complete basic tasks with key products, be it renting a car or checking into a hotel room. Most executive flinch when presented with stark visual evidence of the convoluted nature of their user experience.

    3. Prashant on said:

      Very informative,

      Indeed user experience has become the key factor for any product to succeed. User, today have so many choices that they would want to stick to the solutions which they are comfortable with. It dosen’t matter if the other product has loads of features, what matters is the experience of using a product and making it second nature to handle.

    4. Pingback: User Experience Design Process | UX Design Process

    5. Pingback: Customize User Experience for iOS and Android Platforms

    6. Pingback: Leverage Data and Research for Website Redesign

    7. Pingback: 10 Awesome Frontend Tips to Kill Mobile Web

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>