UI visual design patterns.
- mistakenly mixed up with the visual design itself they way the graphics looks
- rather its about presenting the user with tools to achieve the goals or purpose they desire.
- it is much more than just buttons to click and navigation to go through
it about the relationship between the user and the interface it is matched with.
A good design is matched with good aesthetics and effortless user interactivity.
- well designed should guide users through the experiemce
- the interface is what they interactive with
- you want your users to enjoy your app or interface
from buttons, to menus, graphics and any extras should all be put to meticulous plan to achieve the “look, feel and usability” as part of the user experince.
common navigation patterns
- navigation tabs
- module tabs
- horizontal drop down menus
- vertical drop down menus
- accordion menus
- jumping in hierarchy
- shortcut dropdown
- fat footer
- home link
- event calendar
- article list
tabs are extremely common navigation patterns that are literally taken from the real-world examples from files in a filing cabinet.
you use tabs when content needs to be split in to sections. it opens into a flat navigation mode.
dropdown hides information, you use it when their are 2 to 9 sections placed in hierarchy. space saving and allows users to access all main section of the apps.
search bars with drop downs. used as shortcut to other sections, meaning the user has less clicks in order to receive the information allowing for ease of use.
Big footer allows user to access specific information in a quicker way, by passing the navigation layout you have set for them.
- they are the stories you act out
- represent artificially about how users would interact with you design.
- even if your persona fails at the scenario you at least shows you where you need to pick up on and improve
user scenarios navigation
Lux website navigation scenario
- the user navigates and browsers through the site for a video with a winter theme
- after settling on a video they like they place it in the online shopping basket and set out to check out to hire the video
- the user scenario indicates a users thought process and interaction with the website
persona’s is created via extensive research. this enable developers to have a clearer indication of what user wants and needs.
out of this information you can create personas that have similar issues, concerns and goals that people in the real world would have.
After creating your persona’s you would need to create a scenario that the persona would react in the scenario and the way they would interact with their surrounds.
Examples would include that of the persona of angela
after gaining an understanding of the persona, we develop a scenario in which the persona would interact with. aka angela “angela like being on time” so the scenario she is placed in is finding a coffee shop in an unfamiliar airport with a 30 min layover. Using a airport map, that lists a number of coffee shops as well as their walking distance from her current position, it also shows her a map of how to get there. using this information and interaction from the design of the airport map, angela is able to get her coffee as well as arrive back at her gate in time for her next flight.
Making a persona as a guide for the assessment.
Specific concerns that relate to screen based design.
These design can range from how to use ticket machines, coffee machines. If we have poorly designed instructions than the user would not be able to use the machine.
Ikea are a prime example to use of instructional design, since they sell into a global market, their instructions are completely language free. Furthermore their illustrations are kept clean and simple for easy guidance.
Other examples include such instructions from theexplainers.com, who specialise in creating instructional formats for those who work in special aged care facilities. The staff members use complex machinery with peoples lives at stake, so it is important to get it right.
Cognitive load theory – the way in which we think and how we remember and delivering that information to instruction.
Split attention affect over visual and verbal attention, this can overload a person memory as it would confuse them because of the user trying to marry the image to the text.
Using photography makes the image really unclear to the user as there is too much detail to be looked at.
Design Patterns for screens
Do we start designing the mobile screen first?
Since apple do run across all four platforms of screens (mobile, tablet, laptop, desktop) it is much easier and smarter to start with the smaller screen first, rather than trying to adapt a big screen design down into a mobile.
Starting from a phone screen forces us to prioritise and think about our general structure of the interface.
Overall patterns are just patterns, they might help fix design solutions or not, sometimes they’re not necessary.
More user interface websites are most likely following a similar pattern. WordPress, wix.com all follow this type of pattern. User interfaces have matured of the years and nothing innovative has come through for a while to further design interfaces.
– the hamburger menu
the three horizontal parallel lines are recognisable as a menu bar that hides a menu with slide pattern. pretty much used to save space on the screen
- account registration
– signing up using a social media accounts or a form that is easy to follow.
- long scroll
- card layout (pinterest)
- hero images
– fastest way to catch a users attention
- material design
- responsive design
- flat design
there are 8 phases of interaction design process. From overview to concrete ideas.
they are linked together under; Invent, Design, Engineer. This is the process we take as a designer. We can use many tools to help use identify problems and create solutions.
we start with very low tech to create our ideas. Sometimes it helps us create and look at different perspectives on solutions. Like our storyboarding we have been using for the past few weeks about making toast, a very simple problem, but it helps us understand and visualise solutions to the problems that we face as a interactive designer.
The bulk of your time should be focused on sketching and getting your designs right.
- what people are trying to do
- how they may try to do it
- what gets in the way or helps
- where they might being doing it
there is different contexts for use and of use.
e.g. checking a transaction balance via a computer online
checking your balance via mobile to see you have enough money to purchase products.
Its important that we focus on who will be using the device or interface for, how long they will be using it? and how many people are using it simultaneously. Will it aid the person or will it distract them from their task?
Interactive to interaction
- Working in a team state increases the total effectiveness
- being an influence to your peers
- they way it responds to the user activity
- Everyday machines that we take for granted.
- being able to control the machine so that the user has choices to make
How does this relate to design?
We do this to help people with doing things on a daily basis. The design is to create human connection.
What does it do then?
As a designer we focus on the people and the interaction with the design.
How does affect the world? Do we control?
How does it feel??
Whats the role? Or where does a designer fit in?
There are a lot of factors that we have to included into this. Discipline is one of the human factors. Human-computer interaction and how we work around our workspace on the computer.