Lecture Seven: UI Design Patterns

web-design-ux-user-experience.jpg

  • UI design doesn’t only focus on the aesthetics of an interactive but rather it gives the user the right tools to carry out goals.
  • UI is more than buttons or tools for the user, it should guide them and give them a positive experience. It connects the user with the interactive by allowing them to experience it hands on and give a lasting impression.
  • UI and UX is a good balance between aesthetics and interactiveness.
  • UX focuses on the way the user feels when using the interactive as well as how the elements of the design are placed, effects the way the user feels.
  • UI design patterns refers to the common problems that have common design solutions. The patterns are just reference points.
  • Common Navigation Patterns:
    • Tabs: Nav tabs and module tabs.
      • Tabs are a representation of real-world filing tabs. This idea is referred to as ‘skeuomorphism‘, known as the design concept of making items represent their real-world counterparts.
      • Tabs are ideal when content needs to be organised into sections and when it will fill the entire width of the screen. It also shows the user which part of the content is displayed. However, they wouldn’t be used when displaying articles i.e. a blog. Or when your content has a read more link, another navigation would be more appropiate.
    • Menus: Horizontal, vertical and accordion menus
      • When there is limited space on a website within extensive amounts of content, dropdown menus are ideal as well as displaying hierarchical navigational structure.
    • Jumping in Hierarchy: shortcut dropdown, fat footer, homelink and breadcrumbs.
      • Hamburger menus are a beneficial when the goal is space-saving and quick access.
      • A search bar with a dropdown menu that displays shortcuts to the most frequently visited sites of the user.
      • A fat footer allows users to quickly access specifics of a site without searching through navigation. However, most probably the more popular functions are displayed, but should not be used to the extent of a navigation as this would be deemed as poor web design.
      • Having the website title or brand logo set up as link to the home page is important, or even having a link placed somewhere on the page that links to the home page is helpful. Though, ensure it is displayed in the same spot on every page.
      • Breadcrumbs allow the user to understand which navigational buttons brought them to their current location, in a hierarchical structure, with the ability also browse back. This is a quick form of navigation, however it shouldn’t be the main or only form.
    • Content: Carousel, event calendar, article list. 
      • Carousels are used to show extensive amounts of items, particularly visual items i.e. movie posters, products etc.
Advertisements

Lecture Six: User Scenarios

Scenario-map-example.png

  • Persona = fictional user of the interactive.
  • Scenario = the context within which they use it.
  • Similarly to how a script is written for theatre or films, designers must create a user scenario, which predict how users (user personas) may interact with an interactive in a particular situation.
  • It helps the designer understand what future users may look for when engaging with an interactive.
  • Every scenario is detailed in different ways, however they should essentially include the who, what, where, why and how of the usage.

 

Image Source: http://www.uxforthemasses.com/scenario-mapping/

Lecture Five: Personas

Xtensio_Tool_UserPersona2V2-min

  • Developing personas for a potential audience allows the designer to fully understand who their creation is aimed at.
  • Creating user personas embodies characteristics and objectives that potential users of the intended interactive may have.
  • Generally, user personas include information such as age, sex, occupation, relationship status, hobbies, likes/dislikes, goals, skills, attitudes etc.
  • Developing several personas of your audience is ideal. This can be tough as one doesn’t know who may see the project, however personas of the intended audience is enough.
  • Detail and refine the persona as much as possible.
  • Even adding a persona to the actual product as well as the user, a great method of practice.
  • When creating a product persona (referred to as Artefact Persona) the following questions should be asked:
    • If the product were a person, what would he/she be like?
    • How would users be expected to react upon first impressions of the product?
    • How would you describe the product to a friend?
    • How is the product different from other competing products?
    • Which celebrity, movie, car etc, would you compare the product with?
  • Developing these personas are the building blocks of any design process.

Lecture Four: Instructional Design

instructional_design

  • Instructions are a part of everyday life.
  • If the instructional makes the reader work hard to execute the instructional, then it is not an effective one.
  • Using photography can make the instructional uninformative due to the excess detail in a photograph. For the reader, it can be unclear what exactly needs to be done. However, using illustrations refines the instructional. One can focus more on the instructions due to the exclusion of unnecessary detail and smaller colour palette.
  • How a user interacts with a media:
    • Instruction: The user is instructing the interactive, by clicking various buttons available.
    • Conversation: The user, for instance, can enter personal information into a computer to retrieve data personalised to the user. Information such as gender or age can dramatically effect what kind of data is displayed to the user.
    • Manipulation: Altering the look of the interaction in any way by having control over dragging and dropping elements of the interactive.
    • Exploration: An interaction similar to a video game.
  • Challenges of creating an interactive include limited screen space and resolution. However, opportunities involve time and the layering of detail, i.e. the interactive can be easily altered in any point in time.

https://elearningindustry.com/5-instructional-design-tips-to-enhance-metacognition-in-elearning

Lecture Three: Design Patterns for Screen

responsive_web_design.jpg

  • The “mobile first” approach has become rather popular in recent years. Essentially comprising of designing with the intent of it being for mobile. In a way, this method good to practice prioritising important elements over unnecessary ones and having a consistent design across all platforms.
  • Each design pattern helps the designer understand the possible outcome of the design. Is the solution to the problem solved? This is the main question that should be answered.
  • There are three types of interactive website designs,
    • Material Design: The main idea of material design is to create clean design and focus on user experience. It has a sense of depth and show in comparison to other forms of screen design.
    • Flat Design: Flat design is known to be very simplistic and have no dimension. It is very clean and is user-friendly.
    • Responsive Design: This is a generic form of digital design. It came to rise in popularity since the release of the smartphone. It allows a website to be mobile friendly and is inexpensive to create. However, a downside to this method of design, is that performance is is effected and the design is needs to be very simplistic. Some of the common features of this design method is the following:
      • Hamburger Menu: Three parallel lines on top of each other. Generally placed on the top left/right hand side of the page. It is an effective means of saving space on a page while allowing the user to easily navigate the website.
      • Account Registration: A form to fill out or button to link a social media account to the service the website is providing.
      • Long Scroll: Long scrolls allows one to tell a story to the user. What would’ve been the headings of the navigation bar, that when clicked takes the user to a new page is instead shown in a sectional format across one page, the home page.  All of the content is split tidily and given headers to make it easy for the user to find the information they’re looking for.
      • Card Layouts: Originated by social media platform, Pinterest, this method allows the user to see multiple cards of content. The rectangular shape helps the design be more effective for a responsive design. Cards come in all shapes and sizes. They generally include a title, picture, icons and a maybe a sentence or two of text. Overall, they are basically condensed webpages.
      • Hero Images: Using a large high resolution image on a homepage instantly grabs the attention of the user.
      • Animation: A great way to reel in users, however must be used sparingly. Animations such as the loading sign while the user is waiting helps keep the user engaged as well as the slight animation that occurs when the hamburger button is clicked/touched. Other animations such as when the user hovers over an icon, however this is only operative on desktop as a mouse is required for it to activate. Or carousels, these galleries are effective when needing to show an extensive amount of imagery, ideal for portfolio or photography sites. These are just the tip of the iceberg, there are hundreds of animations to use and help keep the user interested. But NEVER use too many in a single project.

http://mobileseopros.com/mobile-first-web-design/

Lecture Two: Process & Context

design-method-process.jpg

  • Context for use.
  • Context of use.
  • Bill Verplank identifies an important design process which includes invent, design, engineer and present.
  • Research is vital prior to undergoing any design process. This may include sketching ideas and solving any problems at hand.
  • Testing the design is also an ideal phase of any design process. Leaving a prototype in the hands of a user is important to see what alterations and modifications need to be done and even examining the user’s emotions and reactions to the product.
  • Research may include looking at existing products, observing people and asking questions as well as testing prototypes.
  • Four key questions need to be considered when designing an interactive:
    • What are people trying to do?
    • How they may try to do it?
    • What gets in the way or helps?
    • Where they might be doing it?
  • When a designer understands the context for and the context of, the designer can have different solutions for retrieving the same piece of information.
  • Answering questions like where the design will be used, who will use the interaction, how long will it be used for, how simple or complex does the interaction need to be, what are the persons’ needs or goals? Having the answers to these questions are important when producing any kind of interaction.

Lecture One: Intro to Interactive Design

know_feel_do

  • Essentially, Interaction Design examines the relationship between a computer system and the user.
  • It is the task of an Interaction Designer to make the handling of a system clear and straight forward for the user and to draw in their attention.
  • Three main ideas are central to Interaction Design; what does the user need to DO, how should the media make them FEEL and what should they already KNOW/what do they need to KNOW to operate the system. This “trinity” was compiled by Bill Verplank (the illustrator of the picture above as well as an Interaction Designer and researcher). 
  • Gillian Crampton Smith, well-known amongst the Interaction Design community states that Interaction Design shapes our everyday lives in a digital way. She continues “we’re not only designing it’s behaviour and it’s looks but the quality of the way we interact with it.