Lecture 7 – User Interface Visual Design Patterns

Summary:

User interface (UI) is about presenting the user with the right tools to accomplish their goals and focuses on a connection between the user and the experience. It is the first and last impression that either leaves a website with a positive or a negative expression. A good UI focuses on a balance between aesthetics and interactivity and should guide users. User experience (UX) is the abstract feeling that people get from using the website. UI is what people interact with as part of that experience. UX is meant to be as positive as possible and users are meant to enjoy your app/website. For example, for websites, the company’s design team will work on the UI in order to heighten the UX. UI design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for experienced user interface designer. There are many common navigation patterns and some are listed below:

 

• Tabs (navigation tabs and module tabs)

– Extremely common navigation pattern.

– They are an example of skeuomorphism: which is the design concept to making design items represent their real-world counterparts and is used in many design fields.

-Use when:

*Your content needs to be separated into sections and accessed using a flat navigation structure that gives a clear indication of current location.

*There is between two and nine sections of content that need a flat, navigation mode.

*The section names are relatively short.

*You want the navigation to fill the entire width of the page.*You want to provide a list of the highest available sections or subsections of the website.

– Don’t use them when:

*You want to show content-specific data. E.g. you wouldn’t use them when showing latest articles, like in a blog.

*There is no need to single out the currently selected option.

*The list of section/categories call for a more link.

 

 

• Menus (horizontal dropdown menu, vertical dropdown menu, accordion menu):

– Dropdown menu used when user needs to navigate amongst sections of a website. Saves space by organising and concealing information. Not regarded as a technique that increases usability, as they can often be difficult to use.

 

– Fly out (also known as drawer, or hamburger) menus allow for only showing top levels of the page hierarchy permanently. Space saving and access to all key menu items at once.

– Use when:

*There are between 2 and 9 sections of content that need a hierarchal navigational structure.

*Your functionality resembles one of the desktop application.

–Don’t use them when:

*You need to single out the location of the current item or section of the site (you would use navigation tab instead).

 

– Search bar with dropdown – Short cuts added can shorten paths and number of clicks are less and the confusion is decreased.

–Use when:

*Use as a short cut to an otherwise hierarchal structure.

*There are specific functionality or pages that are more frequently used than other parts of the website and you would use the shortcut box to show these choices in order to shorten the path of the users.

*You want shortcuts to pages that are possibly on diff hierarchal levels of the page.

 

 

• Jumping in hierarchy (shortcut dropdown, fat footer, home link, breadcrumbs):

-Big footer: used when user needs to a mechanism that will enable them to quickly access specific sections of website and bypass the navigation structure that you have set up for them at the top.

–Use when:

*Use them as a shortcut to an otherwise hierarchal structure.

*There are specific pages or functions that are more frequently used than other parts of the site.

*Use the shortcut box show these choices in order to shorten the path of users.

*You want shortcuts to pages that are possibly on different hierarchal levels of the page.

*Can be used as navigation when your short on space but isn’t advised as it is a sign of poor navigation design.

 

-Home or link – logo should be linked to homepage of every single page of site. If there is more than one home, make a distinction between the root home and the local home.

 

-Breadcrumbs: Structure of website is more easily understood when laid out in breadcrumb, than if it was in a menu. Takes up minimal space.

-Use when:

*User needs to know their location in the website’s hierarchal structure, in order to possibly browse back by a level in the hierarchy.

*Structure of site follows a strict hierarchal structure of similar formatted content.

*The structure of the site is partitioned into sections and can be divided into more subsections.

*User is most likely to have landed on the page form an external source.

*The page in question is placed fairly deep into the hierarchy of pages and when no other form of visual navigation can show the details at the same deep level.

*Use it together with some other main nav. Wouldn’t use it at the top most level of the hierarchy (e.g. welcome page) and wouldn’t use it alone as the main navigation for the site.

 

 

• Content (carousel, event calendar, article list):

– Carousel:

-Use when:

*User needs to browse through a set of items and possibly select one of them.

*When there is a large set of items to show but you want to let the user concentrate his or her attention on a select few items at a time.

*You want to tease the user by letting them know there are more items available than what is currently shown.

*You do not have enough space to show all your items at once.

*You have highly visual items to display.

-Don’t use them when:

*Items are non-visual (when they are links, text articles, pdfs)

*The content linked to cannot be immediately identified by an image.

(Note: Dots that show where you are have become a pattern recently).

 

• Tags are design patterns for content, as well as thumbnails and content lists.

Thus, there are many design patterns used for user interface design and it is these patterns that help to create a great and positive UX.

 

Reflection:

This week’s lecture has informed me about the difference between UI and UX, which I previously only knew a little bit about each of these topics. I have learnt that it is the UI that can inform whether I has a good UX. They impact each other and can make or break an interactive design. In order to achieve both a successful UI and UX, design patterns must be implemented to communicate succinctly and create a successful interface for the user. Therefore, I have learnt that successful interactive design focuses on the balance between UI and UX and must achieve both of these in order to leave a good impression on the user.

 

 

Figure 1: Navigation Patterns List

Figure 2: Example Showing Tabs as a Navigation Pattern

Figure 3: Example Showing Breadcrumbs as a Navigation Pattern

 

References:

Figure 1: “Navigation Patterns List”, Figure 2: “Example Showing Tabs as a Navigation Pattern”, Figure 3: “Example Showing Breadcrumbs as a Navigation Pattern” and Featured Image taken from Week 7 Lecture Pod.

Lecture 6 – User Scenarios

Summary:

User scenarios are a crucial part in the design process as they are the prediction of how your real users will interact with your site in a given situation. They are the stories that your personas act out. They help the brand understand their future users and allow testing of your site structure before its fully developed. This helps to prevent problems before they occur. Scenarios can be detailed but should at least outline the who, what, when, why and how of the usage. To be more specific, a scenario is a narrative describing foreseeable interactions of types of users and the system and include information about goals, expectations and so on. They help to create simulate a real-life situation so that the brand knows how the user will interact with their design in various contexts. This is formed from extensive research when creating personas, which help guide the design. Thus, user scenarios are important in order to understand how a future user will interact with the interactive and also helps address issues before they become big issues.

 

Reflection:

Just like personas, user scenarios are just as crucial to the design process in interactive design. This is because they help tell the company what a real-life application would be like and helps to make the design more efficient. I have learnt this week that good design comes from thorough research and conducting experiments to see what works and doesn’t work. It is important to test the product first as this can help refine it even more and make it more efficient. Thus, just from creating a scenario, a brand is able to make their design more applicable to their target audience and I find it intriguing that to know how much research goes into this process in order for them to receive a successful outcome.

 

This slideshow requires JavaScript.

 

References:

Ghazarian, A. (2015). User stories and and scenarios in UX design [Image]. Retrieved from https://designmodo.com/user-stories-ux/ [Featured Image]

Reilly, K. (2013). Sketching exercise to imagine our personas within the user scenarios of a feature [Image]. Retrieved from http://www.katreilly.com/disneylife/ [Figure 1]

UX for the Masses (2010). A section of a scenario map for someone ordering some flowers for this mum’s birthday [Image]. Retrieved from http://www.uxforthemasses.com/scenario-mapping/  [Figure 3]

Figure 2: “Flow Diagram Showing Solution for User Scenario Example” taken from Week 5 Lecture Pod.

Lecture 5 – Personas

Summary:

Developing user personas and scenarios is a crucial step in the design process and helps validate the design and user experience being created. That is, by creating fictional users, they represent a brand’s real users and those users’ goals/behaviour. These personas are synthesised from data collected from interviews the real users and are captured in page descriptions that include topics such as behaviour patterns, goals, skills, attitudes and the environment/context. We also find out the fictional persona’s age, gender, occupation, hobbies, likes/dislikes, personality, etc. and it is this information that helps establish the mindset of the future users, as the persona was created from research. They help you design with a clear vision in mind. Personas also depend on whether the interface is being used by a large audience or a small audience. If it is a large audience, you need to work out who is your core audience and who is you fringe audience and satisfy both. However, with a small audience, you can get more specific with your personas as you know the audience more, and user feedback helps define your personas. Also, when creating personas, you need to ask questions in order to understand how different people will use what you are trying to create.

Mental models are thoughts people form around an idea or an activity and vary from person to person. They help show you how your user solves a particular problem, helping shape your future designs successfully. Thus, this information is important to put into your personas and helps guide you as to what interaction patterns you might use and helps know if your flow/interaction makes sense with the user’s mental model. Artefact (also known as a project or product) persona helps develop an agreed personality and give an objective context when evaluating the visual design. This avoids subjectivity becoming involved and keeps the project on track. To develop an artefact persona, you need to ask personality questions, like if the interface were a person e.g. Which product is the celebrity most like? Another useful tool when designing is to use experience keywords. These are key words supported by other words or imagery that suggest a strong direction for the visual design. They give positive impressions and allow the user to connect emotionally. In summary, personas are crucial in the design process and are vital to a successful interactive design.

 

Reflection:

This week’s lecture has informed on a process I didn’t know existed before listening to this lecture. I find it very interesting that in order to create a successful interactive, much research needs to be made to create a fictional user. These fictional characters are the basis of the whole design and need to be created with care and correct research, in order to create an efficient interactive that appeals to the target audience. It is intriguing to know that so much work goes into learning about the target audience but is good to know that the creator wants to appeal to as many relevant people as possible. When I create my interactive design, I will conduct research to figure out what a persona for my project would be like, so that my design meets my target audience’s goals. Thus, I have learnt a lot about personas this week and how they are vital to create an effective interactive design.

 

Figure 1: Diagram asking WHAT, showing how different users interact with the same interactive.

 

Figure 2: Diagram showing experience keywords and the process of establishing them in a real life example.

 

References:

Figure 1: “Diagram asking WHAT, showing how different users interact with the same interactive.”, Figure 2: “Diagram showing experience keywords and the process of establishing them in a real life example.” and Featured Image taken from Week 5 Lecture Pod.

Lecture 4 – Instructional Design

Summary:

Instructional Design is an important aspect of Interactive Design and many factors must be considered when in order to produce a successful instructional design. According to the cognitive load theory, which describes the most effective ways to deliver instructions, we use our limited ‘working memory’, which is how we manipulate information in our short-term memory and is a key function. An ineffective way to use your working memory is called the ‘split-attention effect’. That is, when text is separated from images in an instructional design, it causes the working memory to overload and limit what we remember. By using “Proximity”, one of the Gestalt principles of perception, it is a far better approach as the text is next to the diagram and is perceived as being closely related, initiating better memory retention. An example of how to produce an effective interactive design is to use simple graphics to create clarity. That allows for the salient points to be recognised and highlights the main points, eliminating any visual competition from unnecessary details. In contrast, photography isn’t the best technique as it is unable to highlight specific areas due to every detail having an equal visual weight, making for poor instructional design.

Alberto Cairo describes interaction as having the following different kinds; instruction (e.g. clicking buttons), conversation (e.g. using Siri), manipulation (e.g. dragging and dropping elements) and exploration (e.g. games that require the user to explore and create their own adventure). There are both opportunities and challenges involved in working in an interactive medium. Opportunities include being able to add dimension of time, where aspects are revealed in response to the user’s actions on a screen-based design and also the ability to layer details, allowing the user to choose what reveals depending on their actions. The ability to do things in multiple ways is called ‘redundancy’. For example, giving them an option to read and look at visual images and thus allowing them to choose, which gives them a sense of control, making the user feel engaged and empowered. However, there are also challenges, such as, limited screen area, limited resolution, unable to know what the user wants to look at and present it all at once, rather than in print, where the information is presented all at once and they can read what they choose. Thus, instructional design has many aspects to consider and must consider cultural differences in order to create a successful design that anyone can understand.

 

Reflection:

From this week’s lecture, I have decided to reflect on the fact that instructional designs need to follow a certain criterion in order to be successful. That is, anyone from any country must be able to understand them and they need to be simple in graphics but include all the necessary instructions. This is because, if there is too much going on, the reader will not know the salient points and will have a limited working-memory, due to overloading the memory by placing text and images far away from each other. Instructional design really focuses on how our brains receive information and has a scientific approach to it, as it really depends how things are placed and presented. I have also learnt that instructional design can come in many different forms when it comes to the interaction, as stated by Alberto Cairo and I have realised the positives and negatives when working in an interactive medium. Therefore, when I create my instructional design, I know now the factors I need to consider and the importance of the correct layout.

This slideshow requires JavaScript.

 

References:

Figure 1: “Example of Poor Instructional Design that Uses a Key”, Figure 2: “Example of Good Instructional Design That Is Labelled and Presented Altogether” and Figure 3: “Poor Photographic Instructional Design VS. Effective Simple Graphic Instructional Design” and Featured Image taken from Week 4 Lecture Pod.

Lecture 3 – Design Patterns

Summary:

When it comes to interactive design, design patterns are the foundation. These design patterns are convections that have developed in terms of user interface and in terms of page composition and have a working function. However, it must be an appropriate pattern that solves the design problem, otherwise it is not beneficial. The current trend of designing mobile interfaces first allows us to prioritise and focus on the main elements, rather than typically starting on a desktop computer, which is what we are accustomed too. In today’s world, a lot of sites look similar due to responsive design but due to the fact we have changed how we used the web, this isn’t bad as we can see how design patterns have matured. This allows us to realise that there isn’t much room to re-invent interface patterns and as long as it is a smooth experience, that’s the main thing.

There are 9 design patterns:

1. The Hamburger Menu – this is a button with 3 horizontal parallel lines, usually in the top corner of an interface. It’s used to save space as it is a hidden menu, is best for interfaces with full sized image or video in background and is a combination of a drawer menu and reveal/hide button patterns.
2. Account Registration – this can be featured on websites and is most effective when there is a small number of steps, as people are more likely to engage in this.
3. Long Scroll – Because of the rise of mobile devices we are now accustomed to long scrolls, so placing all your vital elements above the fold is now a myth. The technique works really well for sites that want to lure users through storytelling and you still mimic a multi-page site by breaking the scroll into clear sections.
4. Card Layouts – cards contain bits of information, such as a title, picture, icons, etc and act as an informing way to present information in a bite-sized way. Their rectangular shape makes them easy to re-arrange for different device break points, acting like ‘containers’, each representing a concept and acting like a miniature webpage.
5. Hero Images – Due to increasing technology, we aren’t exposed to slow load times anymore. This makes hero images more popular and they grab the user’s attention, due to vision being our primary sense. One common layout is a hero image above the scroll, followed either by a zig-zagging section or a card space arrangement.
6. Animation – Used to enhance the site’s storytelling, making user experience more interactive and entertaining. You must to consider if it adds to your site story elements and personality. Animation can be thought of in terms of two groups; large scale animation – used primarily as an interaction tool and they have more impact on users and include effect like parallax scrolling and pop-up notifications, or small-scale animation – these include spinners, hover tools and loading bars. They don’t require any user input. Examples of animations that can be implemented are: loading animations, navigation/menu animations, hover animations, gallery and slideshow animations & scrolling background animation/videos (hero images).
7. Material Design – Material design uses photo effects and the concepts of movement and depth in order to create designs that appear more realistic to the user. IT was launched by Google in 2015 and is considered its new style language. It focuses on a minimalistic look and creating clean design that focusses on user experience. It shares similarities to flat design, but material design makes use of depth and shadow. Material design was intended to provide user experience and interface across devices.
8. Responsive Design – A popular pattern that’s on the rise thanks to mobile internet usage. It is simple and cheap, while creating a fully functional mobile website. It does, however, tend to be minimalistic and can have issues if not designed properly. It also works great with cards, as responsive design can easily restructure to fit any break point or screen size, like rearranging rectangular containers of content.
9. Flat Design – A pattern that has been around for a while is compatible with other trends such as minimalist design, responsive web design and material design. But moving forward, it’s likely that we’ll see further trends come to the forefront.

Thus, while there is a plethora of design patterns available to use in this technologically expanding world, the pattern must meet the design solution and function, otherwise it is useless to implement and will not serve any real purpose.

 

Reflection:

This lecture, I believe has been very informative as it contained a lot of detail about several design patterns and how they should be implemented. It talked about how times have changed and so does the way we use technology. We have to expand in order to grow our technological knowledge. It was interesting learning about how the design patterns all specifically have an important function, as, as a viewer, you usually don’t think about these everyday functions you use when on the internet. I also learnt that the pattern used must meet the aim of the design solution, otherwise it is not an effective interactive design. Thus, everything must be planned out and implemented with a purpose, in order to be successful and efficient.

 

Figure 1: Example of a Hamburger Menu

Figure 2: Quote Discussing Design Patterns

Figure 3: Examples of Loading Animations

 

References:

Interaction Design Foundation (n.d.). Learn UX design: Online user experience courses [Image]. Retrieved from https://www.interaction-design.org/courses

Figure 2: “Quote Discussing Design Patterns” and Figure 3: “Examples of Loading Animations” taken from Week 3 Lecture Pod.

Rachel (2015). 2015-07-04 hamburger menu. [Image]. Retrieved from https://mcculloughwebservices.com/2015/06/23/how-to-show-us-your-main-navigation-menu-items/2015-07-04-hamburger-menu/ [Figure 1]

Lecture 2 – Process & Context

Summary:

The process associated with forming a successful interactive design has many steps and questions that must be asked and answered in order to fully meet the needs of the client and understand them. This process is crucial as designers, we need to understand the context for use and the context of use. That is, we need to know how people will interact with the device/interface so that we can create design solutions that facilitate their behaviour. This requires us to create scenarios that revolve around their use of context. Generating ideas based on precedent research, such as observing people and testing prototypes, can help make design decisions. This use of context helps take the interactive design to the next level by adding more specific details and making the interface applicable to real life scenarios. It also increases our knowledge as designers as we discover new solutions and ways to communicate. Thus, Verplank states that there are 8 different phases in the interactive design process, which range from invention to presentation and it is these stages, that sets a common ground for interactive designers to work from and helps them create successful interactive designs, based on context.

 

Reflection:

I have learnt from this week’s lecture that the process involved in creating an interactive design requires a lot of steps and how it is crucial you know the needs of the client and their context. You need to ask several questions and create various scenarios in order to imagine all the possible ways your interactive design can be used. This can be done by researching, surveying or even sketching. All these processes are important as they provide different insights to one another and can help you expand on your ideas. In particular, obtaining other people’s opinions/views can open up a lot more possibilities and make visions clearer as to what is the main goal of the design. As a learning designer, I think that it is the designer’s amount of research that can each break or make their design. That is, if a designer has done no research on the client, how can they know the key message the client wants to show? Therefore, when designing I now know to research the context more and this will help me create more specific and original design solutions.

 

 

This slideshow requires JavaScript.

References: 

Cardoso, V. (n.d.). My approach to designing better products [Image]. Retrieved from https://www.valenciocardoso.com/process/ [Figure 2]

Garg, M. (2017). Our design process [Image]. Retrieved from https://www.slideshare.net/mad4arts/uxui-design-process-studio-creativeme [Figure 1]

Iqoncept (2012). Idea words yellow sticky notes brainstorm solution – stock image [Image]. Retrieved from https://depositphotos.com/13559210/stock-photo-idea-words-yellow-sticky-notes.html

Olesen, R. & Slynge, C. (2011). Avoiding truck accidents interaction design Framework [Photograph]. Retrieved from https://cdpt2010.wordpress.com/ [Figure 3]

 

Lecture 1 – Intro to Interactive Design

Summary:

Interaction Design focuses on the idea of supporting the everyday lives of people through specifically-designed interactive products. This type of design and interactivity allows our senses, such as sight, smell and touch, to be visibly recognised and felt as it is this interaction with our senses that communicates our wants and desires. Interactive design is simply about experience, not just information. That is, all experiences/products inhabit a level of interactivity (continuum of interactivity) and should be appropriate to the goals of that experience. Interactivity can allow us to respond, work together and influence each other. The five key design areas that contribute to the design of interactive products are interactivity, information architecture, time and motion, narrative and interface. Thus, as Bill Verplank states an interaction designer needs to answer three questions: how people act, feel and how they understand as interactive experiences can shape the everyday lives of people.

Reflection:

I believe the most important aspect regarding this lecture pod was getting me, the viewer, to understand the huge importance Interactive Design is in the world. Before watching the lecture pod, I only had a small idea as to what Interactive Design was about, but after watching this introduction to the subject, I feel that I know a lot more now. I think that the Continuum of Interactivity was an important concept to understand, as it’s not about which experience/product has the most interactivity. Rather, it’s about pairing that experience/product with the correct level of interactivity that match the goals of the experience/product, as well as understanding how people feel, act and understand. Therefore, I have learnt that interactive design affects peoples’ lives more than I previously thought and can come in many different forms and the result is best when it is tailored to the specific needs of the experience/product.

 

Figure 1: Chart Showing Various Levels of Interactions

 

Figure 2: Continuums of Interactivity Diagram

References: 

Local Projects (2013). Inside Gallery One, Cleveland Museum of Art. [Photograph]. Retrieved from http://www.wearedesignbureau.com/projects/museum-design-gets-interactive/

Figure 2: “Continuums of Interactive Diagram” and Figure 1: “Chart Showing Various Levels of Interactions” taken from Week 1 Lecture Pod.