Week 7: UI Visual Design Patterns

 

 

 

 

Image retrieved from https://vimeo.com/161435877

UX (User Experience):

Persona’s

• User stories
• User Research
• Usability Testing

UI (User Interface):

• Layout
• Visual Design
• Branding

Common Navigation Patterns:

• Tabs: navigation tabs, module tabs
• Menu: Horizontal and Vertical dropdown menu, Accordion Menu
• Hierarchy: Shortcut dropdown, home link, breadcrumbs
• Content: carousel, event calendar, article list

Tab:

• They are an example of “skeuomorphism”, which is the design concept of making items represented and resembled by their real world counterparts.
• Skeuomorphism is used in many design fields, including user interface, web design, architecture, ceramics and interior design.
• When will you use tabs? When your content needs to be separated in sections and using a flat navigation structure, that gives a clear indication of current location.

Drop Down Menu:

• Used when the user needs to navigate amongst sections of a website, but space for navigation is limited.
• They save space by organising and concealing information.
• However, they can often be difficult to use.
• You will use a dropdown menu when there are between 2-9 sections of content that need a hierarchical navigation structure.

Drawer Menus:

• Main benefit of these is space saving, and quick access to all key menu items at once.

Search Bar with Dropdown:

• Adding a shortcut to the most frequently used functionality, the path can be lessened, and the confusion can be decreased.
• You will need these as a shortcut to an otherwise hierarchical structure.
• You will use it when there are specific functionality or pages that are more frequently used than other parts of the website.

Big Footer:

• Use these when the user needs a mechanism that will enable them to quickly access specific sections of a site or application, and bypass the navigational structure set up for the user at the top.
• Use this as a shortcut to an otherwise hierarchical structure.

Home:

• Site’s logo is always link to the site’s starting location, normally the front page of a site.
• Site’s logo or link to “Home” must be on every single page of your site.

Breadcrumbs:

• Inform users of their location in relation to the entire site hierarchy.
• The site is easier to understand when it is laid out in a breadcrumb, than if it is put into a menu.
• Breadcrumbs take up minimal space, and even though not all users, use them, they still hint at the structure of the website and the current location of the page in question.
• The term, ‘breadcrumb’, is quite deceptive as it implies the history of how the user got to the page. A more correct term will be to describe the current locations place in the hierarchy of the website.
• You will use these when the structure of the website follows a strict hierarchical structure, of similar format and content.

Carousel:

• You will use this when the user needs to browse through a set of items and possibly select one of them.
• Use it when there is a large set of items to show, but you want to let the user concentrate his/her attention only on a set few items at a time.
• You would use this when you will like to tease the user by letting him/her know that there are more items available than what is currently shown.
• Use it when there is not enough space to show all the items at once.
• You will use it when you have highly visual items to display such as movie posters, album covers, products, designs etc.
• You will not use it when the items are not visual, such as links to text articles or PDF documents.

 

Reflection:
Good UI design should strive for a balance between aesthetics and effortless interactivity.
Your UX (User Experience) needs to be as efficient as possible. This is determined by the quality of the UI. It is important to include a homepage link on every page of a site.  The link may be embedded within a logo or simply in the text ‘Home’.

Week 6: User Scenarios

Image retrieved from https://s-media-cache-ak0.pinimg.com/originals/da/e9/81/dae981481797ba057c76f06be5c04766.jpg

• User scenarios are the stories your person acts out. Basically user scenarios are thought out exercises, although they are usually represented visually, in which you predict how certain types of users, represented by your persona’s, will interact with your website in order to complete a given goal.
• User scenarios help us understand what your future users will look for when trying to complete tasks on your site. Even if your persona’s fail at the task, at least you now have a visual representation of your problem and can go back and solve it easily.
• User scenarios allow you to test your site and isolate problems before they become problems.
• User scenarios should outline the who, what, when, where, why and how of the usage.
• A persona is a fictional user of your product and a scenario is the context in which they use it.

DEFINITION OF SCENARIO:

A scenario is a narrative describing foreseeable interactions of types of users (characters) and the system. Scenarios include information about goals, expectations, motivations, actions and reactions. Scenarios are neither predictions or forecasts, but rather attempts to reflect on or portray the way in which a system is used in the context of daily activity.

Persona and Scenario Example:

• Cooper PDA airport guide
• User: Angela
• Angela is a PR consultant and frequent traveller.
• Her goals are to: always be on time for client meetings, travel without a hassle and don’t feel stupid.
• Scenario for Angela:
• Angela has a short 30-minute layover in an unfamiliar airport. She really wants to grab a cup of coffee before she heads to her connecting flight, but doesn’t know where to go.
• Breakdown into steps:

1. Looks up how far a coffee shop is from her present location.
2. Map locates coffee shop and she follows the map to it.
3. Angela follows directions the airport guide provided her and successfully finds the coffee shop and purchases her coffee.
4. Now she needs to find her way back to the gate, she uses the airport guide once again to look up the gate she needs to be at. She follows the directions the airport guide gives her.
5. She arrives at her gate.

• Airport Guide:
• The airport guide only uses two screens, the list and the map. (after selecting the service, Angela sees the map screen to her destination).
• The airport guide was made to be simple and quick, using two screens, to help users such as Angela travel with as little hassle as possible. The airport guide has reliable information and directions, to ensure Angela never feel lost or confused, the airport guide provides an easy and simple EDM as well as visual and text directions.

 

Reflection:
User scenarios are short stories that tell us about our users motivation, their goals and actions on our website. When writing a user scenario, keep it short and to the point. The four w-questions who? what? how? why? can be used as checklist for the most relevant information to include in a user scenario.

Week 5: Personas

Image retrieved from https://xtensio.com/wp-content/uploads/2016/02/Xtensio_Tool_UserPersona2V2-min.png

User Personas: How you set up a persona:

• Age
• Sex
• Occupation
• Hobbies
• Likes/dislikes
• Other details germane to the product such as: behaviour patterns, goals, skills, attitudes, their environment (or context)

• Large vs. small audience

• EBay site; larger audience
• Dora the Explorer website; smaller audience

• What
• Netflix across platforms; iPad, iPhone, computer.

• How
• Users who want to browse vs. users who want specific content

• Mental Models
• Mental models are what thoughts people form around an idea, or activity, and these vary from person to person. E.g. A 16-year-old mental model of taking a note may include using a smartphone app, which is very different to an elderly person’s mental model of using a post-it note.
• Mental models are incredibly important user experience, because they illustrate how your user approaches a particular problem.

• Artefact Personas
• Another approach is to apply the personas to the artefact; the project of product, not the user. This can be most useful for client meetings, where often the discussion collapses into subjective assertions like: “I don’t like green”. By having a developed and great personality for your project will give everyone a context to objectively evaluate the visual design and lets you get the discussion back on track if it veers off into subjectively or personal likes and/or dislikes, it takes it away from the visual design.

• Product Personality Questions:
• If the interface were a person, what would she or he be like?
• How would you expect uses to react when they first view the product?
• How would you describe this product to a friend?
• How is the product different from competitive products?
• Which celebrity (or car, movie etc.) is the product like?
• Why?
• E.g. A medical device to help elderly patients manage their healthcare in their homes:
• For this, it was learnt by stakeholders that the elderly were more likely to accept the product if it had a similar personality to that of a visiting nurse. This knowledge helped them shape a visual appearance that presented itself as caring, conscientious and trustworthy in tone and style.
• The first step they did was develop experience key words, and during this process they listed and grouped any descriptive words or concepts that occurred during stakeholder and user interviews. These groupings formed the foundation for a set of experience key words that would define and govern the visual strategy.

 

Reflection:
Although one persona is solely the focus of a product, many personas are also implemented. It’s important to develop personas in the beginning of your design process, in order for everything to develop as you like, with the user base fresh in mind.

 

Week 4: Instructional Design

Instructional design: informing someone on how to do something or to explain how something works.

In our daily life we commonly interact with instructions on many different levels. Whether it be audio instructions from an automated phone system, using a ticket meter, or installing toner in a printer, we depend on well designed instruction to perform these tasks.

Ineffective designs:

• Too simple designs with no text or context
• Split – Attention effect – when text instructions are apart from graphics
• Too much text

Image retrieved from  https://vimeo.com/159655661

Effective designs: 

• Medical Diagrams on how to do
• Marry both graphic and text together
• Straight forward instructions
• isolate the important elements of the design (try avoid photography)

 

Kinds of Interaction:

Instruction – user tells program to do something like pushing a button.

Conversation – back and forth dialog.

Manipulation – drag and drop elements.

Exploration – open, game-like, playful.

Reflection:
Instructional design is evident in everyday life.
Efficient designs are easy to follow.

Week 3: Design Patterns

• screen design basics & design patterns for screen
• user interaction and page composition – differentiation between mobile, tablet, laptop and desktop screens

“Mobile First”

• “mobile first” is new buzz word in the screen design sector
• designing for mobile first is a more effective design approach
• process begins for smaller screens then adapted to larger screens
• movement forces you to prioritise information, and to alter mental structure which is accustomed to larger screens

UI Pattern Proliferation

• many similar UI designs
• example: WordPress and their theme sites
• common UI design patterns are easy to navigate and use
• design patterns have matured and there is also no real reason to reinvent UI patterns and little innovation for UI patterns.

9 popular design patterns/trends:

• Hamburger Button (menu)
• On scrolling
• Account registration
• Card layouts
• Hero Images
• Scrolling and background animation
• Material design
• Flat design

Hamburger button

Image retrieved from https://vimeo.com/159663778

Image retrieved from https://vimeo.com/159663778

 

Reflection:
Design Patterns represent excellent practice, but trends should not always be followed. Design patterns represent popular techniques, but make sure it’s suitable. For instance, a ‘single page infinite scroll’ concept may be not the best use for an e-commerce website, as it is typically used for a less complicated layout.

Week 1. Introduction to Interactive Design.

What does an interaction designer do?

In his interview Bill Verplank explains the context of the history and future of interaction design with paradigms that serve as patterns for the way people think about the subject. He describes the process of designing interactions with a concise diagram, and gives an example to illustrate it.

Image retrieved from https://vimeo.com/83683447

Three key Q’s of designing interactions for users:

1. How do you do? – (How do you affect the world?)
2. How do you feel? – (how do you get feedback from the world?)
3. How do you know? – (Deciding wether the user needs a map/overview)

Interactivity.

• relating to a program that responds to user activity.
• working together so the effect is 2 or more.
• capable of acting on or influencing each other.

Common interactions include a book, mobile phone, shopping website and a conversation (most engaging and reactive).  In an interaction, the wants, needs and desires of the user, has an effect or response that is recognisable, wether it be through eyes, ears, touch and/or smell.

Reflection.

• Brief introduction to the history and basics of interactive design and interactivity.
• Examples are introduced through graphs and flow charts.
• Reveals the importance of interactive design and how it’s evolved.