Lecture Review

Week 4: Instructional Design

Analysis, Instructional Design, Lecture Review

In our daily lives, we are constantly following instructions. Whether it using a parking meter, the washing machine or cooking at home, we are surrounded by this type of design. It can be crucial in certain disciplines, like medical diagrams or airplane evacuation pamphlets. These types of instructional designs, like all, must carefully consider the audience, their background and presumed knowledge. This a reoccurring feature of design work, the user drives the design. As explained by Alberto Cario, the 4 main types of interaction include:

  • Instruction – (most basic means)
  • Conversation – (back and forth dialogue – SIRI)
  • Manipulation – (drag and drop – alters the appearance)
  • Exploration – (games)

Waterson, S. (2019). GDIDMPOD04a [Online Lecture]. Retrieved from https://vimeo.com/319375981

Week 1: Intro to Interaction Design

Analysis, Interaction Design, Lecture Review

Interaction is the direct involvement with something. Interaction design relates to the aspects of the interface that the user clicks on or receives feedback from in some way (think: a button that leads them to another page is an interaction). When done properly, interaction design lifts the users experience. By providing instant feedback, through links, buttons and animation, the user is drawn to the site and more likely to stay longer. Interactions need to be thoroughly thought out and planned. Unnecessary interactions can be distracting or confusing. Interaction designers need to consider who they are designing for, their context and prior knowledge.

Designer, Bill Verplank believes the 3 questions to ask are:

how do you do? (act)
(the client does something and we provide the tools)

how do you feel? (think)
(we provide the platform that we think is best suited – control the machine to give them feedback)

how do you know?
(what kind of knowledge do we expect of our users – how can we best guide them)

Sharp, Rogers and Preece, (2002) Interaction Design, John Wiley & Sons, Inc. New York, NY, USA.

Interactivity is something that responds to an action. Types of common interactivity include: phones, websites, conversations and the 5 senses (things we can see, touch, smell, taste, hear). Interactions can be small and almost unrecognisable or explicit. It is most important to understand who you are designing for, once you understand the user, a designer can better plan and create accordingly.

Waterson, S. (2019). GDIDMPOD01a [Online Lecture]. Retrieved from  https://vimeo.com/319375480

Week 7: UI Visual Design Patterns

Analysis, Instructional Design, Lecture Review

User Interface (UI) is often mistaken for the visual design appearance of a site. In reality the UI is the presentation, format and layout of the tools and information – it is the structure or bones of a site. Designers need to consider how the user will interact with the site and design according to those needs. UI needs to be familiar to an extent, if the interface is new and unusual the user may get confused, lose interest and leave the site. It should require effortless navigation and interactivity by the user, which has been carefully planned mapped.

The User Interface (UI) should heighten the User Experience (UX)

Tabs

  • Come from the real world
  • Skeuomorphism
  • When: content needs to be separated into sections
  • When there is 2-9 sections of flat navigation mode
  • Section names are short
  • Entire width of the page

Drop Down

  • Space is limited
  • Not regarded as a technique that increases usability – can be difficult to use
  • Save space
  • 2-9 sections of content
  • functionality resembles a desktop navigation
  • don’t use when you need to single out the section of the site – use tabs
  • fly out from the side (hamburger)
  • quick access

Search bar with dropdown

  • quick
  • hierarchy can get in the way of the user’s intentions
  • short cut

Big footer

  • by pass the top nav
  • specific page of functions that are more frequently used
  • short cuts!
  • Sign of poor nav

Home

  • ‘go back to a safe place’
  • the logo is usually linked
  • safe
  • always need one
  • should always be in the same location on all pages! – don’t move the home button

Breadcrumbs

  • needs to know their location
  • minimal space
  • hint to the structure of the website
  • current locations place in the hierarchy of the website
  • strict structured websites
  • lots of sections that are divided
  • DETAIL
  • Together with other navs
  • Don’t use it alone

Content nav patterns:

Carousel

  • Browse through a set of options
  • Tease the user – there is more than you think
  • Space saving
  • Need to indicate where you are – how many cards

Tags

  • Categories
  • Etc.

Waterson, S. (2019). GDIDMPOD07a [Online Lecture]. Retrieved from https://vimeo.com/319376545

Week 6: User Scenarios

Analysis, Interaction Design, Lecture Review

After successfully creating user personas, the next step in the design process is developing user scenarios. These scenarios depict how the intended user will interact with the product or site. If done properly it should identify points that stand out to the user, what things they would look for, and should identify problems and solutions before a final product is released. The process includes mapping out the direct path the user would take when using your product. This process should be done multiple times and should question every decision and aspect of the product.

Scenarios are effective in highlighting hierarchy and points of interest in the site. They give designers an idea of what the user would expect to see at certain times throughout their process. Designers should also consider the context in which the user will be interacting with the product. This process is important to solve potential problems as well as attempting to view the product through objective eyes. When a designer is creating, it can be difficult to isolate themselves from the product they are immersed in. A user scenario helps to unveil this objective experience.

Waterson, S. (2019). GDIDMPOD06a [Online Lecture]. Retrieved from https://vimeo.com/319376412

Week 5: Personas

Analysis, Lecture Review

User Personas

User personas are fictional characters that reflect real users. They are not an exaggeration but a true representation of hypothesised group. When creating personas, it is important to use informed research or knowledge of the intended user base. They should specify goals, behaviours, skills, environmental factors, attitudes, likes and dislikes. During this process the expectations of the users should be outlined as well.

The most important thing to consider when creating a persona is to be true to the task. If you have created an exaggerated persona who fits the criteria perfectly you will not get effective or informative feedback. Designers must consider all aspects of the targeted audience and aim to create solutions to best suit these needs, however, understand that the perfect client or user does not generally exist in the real world.

Artefact Personas

Artefact personas are a direct representation of the project. They help to create an identity and ‘keep things objective’. Consider questions like:

  • If the interface was a person, what would he or she be like?
  • How would you expect users 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 is the product most like? / Least like? Why?

Waterson, S. (2019). GDIDMPOD05a [Online Lecture]. Retrieved from https://vimeo.com/319376412

Week 3: Design Patterns

Analysis, Interaction Design, Lecture Review

Design patterns are a starting point for all user interaction planning. As Christopher Alexander, author of ‘A Pattern Language’ mentions, “patterns are hypotheses… free to evolve under the impact of new experiences and observation”. This implies that any design patterns must be altered to suit the aims of the project and the needs of the user. They provide a basic platform for which the designer is responsible to build upon. A new movement, mobile first, suggests that designing for a smaller device first means the adaption to a larger desktop would be easier. The lecture continues to review the most popular design patterns for desktop screens, which are as follows:

UI Pattern Proliferation

  • A lot of a sites are very similar in user interface design patterns
  • There’s no point in reinventing something that doesn’t need to change

Hamburger

  • The 3 bar menu      
    • Top left or right
    • A drop down
    • Saves space on screen – especially on smaller screens
    • Main content in hidden

Hamburger Menu Icon [Image] Retrieved 2019, May 15 from https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db

Account Registration

  • Form to fill out or a button to use a social account to sign up
  • Encourage users to complete one step at a time not a huge form on one page
  • Typeform.com

Long Scroll

  • Think Facebook/Instagram
  • Storytelling
  • Can still access multi page sites

Card Layouts

  • Pioneered by Pinterest
  • Each card represents each different section of content
  • A card can be any size – will have a title, username, picture,
    • Condensed webpage

Hero Images

  • The increased internet speeds allow for large images to load faster
  • Above the scroll followed by a card layout section

National Geographic. (2019). Documentary Agency. Retrieved from https://www.nationalgeographic.com/

Animation

  • Must be added strategically
  • Can really enhance the user experience
  • Small scale – spinners, loading bars,

Loading animations

  • Popular for flat or minimal or portfolio design
  • Should not use sound

Loading Animation [Image] Retrieved 2019, May 15 from https://codemyui.com/git-kraken-inspired-rotate-loading-animation/

Navigation and menus (non scrolling animations)

  • Space saver

Hover animations

  • Instant visual feedback
  • Don’t work for mobile obviously

Gallery and slideshow animations

Motion animation

  • Visual hierarchy

Scrolling and background animation

  • Should be used in moderation

Material Design

  • Appears more realistic
  • Shadows, minimalistic look
  • Popular
  • Creates depth
  • Flat design – apple IOS
  • Popular for app design

Responsive Design

  • Works well with cards

Flat Design

  • Compatible with other design patterns

Alexander, C. (1977). A pattern language. Oxford, England: Oxford University Press.
Waterson, S. (2019). GDIDMPOD03a [Online Lecture]. Retrieved from  https://vimeo.com/319375751

Week 2: Process & Context

Interaction Design, Lecture Review

Designers must first consider the complexity and dynamic culture of contemporary society when planning for any widely-used interactive media. Precedent research is done in the preliminary stages of the design process, beginning with brainstorms and note taking based on quantitative and qualitative research, content analysis and observation. The designer makes informed decisions based off the findings to narrow down the research into flowcharts, storyboards and sitemaps to clearly communicate how the user will interact with the interface. If done effectively, the designer will often spend most of their time working through a process and refining design features and concepts, before creating the final product. However, in order to perfect this, the designer must consider, not only how the user thinks and their influences, but also in what context they will use the product.

Depending on the clients aims and intended purposes, designers must contemplate their knowledge of the audience as well as potential problems that may occur when using the product. Key points the designer needs to consider include:

  •  The environment the user will access the product – will they need privacy or is it acceptable for use in a public space?
  • The time the user will spend interacting it
  • The complexity of the product – what assumed knowledge the user must have
  • Any problems that may interfere with using the product

Once these have been researched and answered the designer can effectively create a product, that suits both the needs and aims of the client, as well as successfully connecting the user and the information in a clear and efficient manner.

Waterson, S. (2019). GDIDMPOD02a [Online Lecture]. Retrieved from  https://vimeo.com/319375610

Interactivity

Interaction Design, Lecture Review

Interactivity, more specifically interactive design, takes on many forms and relates to any ways in which humans respond to any type of media that require a response or action. This can be as simple as a conversation between two people or the use of a responsive app or website that demands the users input in order to work effectively. Bill Verplank, describes role of interaction design as ‘design for people who act on the world around them and receive feedback’. He considers the role of an interaction designer is to ask 3 questions, how do we act, how do we think or feel and how do we know. Similarly, Gillian Crampton Smith, believes that the designer must first know their audience to design accordingly for their needs. The designer must think for the user and plan interactions based off how the information will be received most effectively. Thus, it is vital for a designer to know how a range of people behave and what preconceived ideas they already have to be able to provide the tools they need and design a platform that connects the user and the information successfully.

Waterson, S. (2019). GDIDMPOD01a [Online Lecture]. Retrieved from  https://vimeo.com/319375480reference:

Precedents

Wolf Whale. (2019). Design Agency. Retrieved from http://www.wolfwhale.com/
Ocean School. (2019). Documentary Agency. Retrieved from https://oceanschool.nfb.ca/
In Pieces. (2019). Documentary Agency. Retrieved from http://species-in-pieces.com/

All 3 of these sites utilise a long scroll feature and animation. They require the user to scroll to reveal new information and click on targeted points on the screen. The animations invite the user to expect more as they navigate through the site. These types of interaction are simple and short but capture the users attention. Each use a progress bar on the right hand side of the interface which implies the user would expect to see this here. These user interfaces are a perfect examples of successful interaction design.