Week 7: UI Visual Design Patterns

Week 7: UI Visual Design Patterns

by digimedsite ♥ 0 Leave a Comment

Screen Shot 2017-04-11 at 4.20.17 pm

 

 

 

 

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

Week 6: User Scenarios

by digimedsite ♥ 0 Leave a Comment

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.