Week 3: Design Patterns for Screen

Designing for a mobile phone screen is what you should begin with, then continuously grow to the computer screen. This forces us to priorities our structure to work that they can be expanded and modified to fit the larger screens. Christopher Alexander was an architect, he discovered the language of pattern in his book. In interactive design, design patterns are more than just visual repetition, they are also reusable solutions that are often seen in software and interface design. “…each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the problem presented.” (Alexander, 1977)

responsive web design
Screen Designs that are responsive from the Computer to Tablet to a Mobile Phone

Sites for screen are very similar in terms of placement, theme and design, which is one of the biggest side effects of responsive design. This isn’t a bad thing, but it reveals how we have consumed the web over the years and have resulted in people being inspired from another pattern to use for their site.

A few common pattern items:

  1. Hamburger Menu: An easily recognisable as a drop menu at either the top left or top right of the interface. This symbol is used to save space on the screen and allows the user to navigate their way through the application or website.  
  2. Account Registration: This can include a form to fill out, or button that gives you access to a social account that you would need to sign up for. Multi-step forms are easier for the viewer to fill out as the flow is smooth without all the chunk in one page.
  3. Long Scroll: These are perfect for websites that want to present their interface as a story. This can also simplify your navigation by minimising the amount on each page.
  4. Card Layouts: This includes an image, title and a small caption rather than revealing a whole explanation of what is presented.
  5. Hero Images: One of the fastest ways to grab the user’s attention.
  6. Animation: makes the user’s experience more entertaining and interactive.
    • Loading Animations: entertain users while waiting, more popular for simple sites.
    • Navigation and menus (non scrolling) animation: used to save screen space
    • Hover Animations: when hovering over these animations it usually gives feedback to the user when unsure of what a section/button is for. Do not work for the mobile phone as we hover with a mouse
    • Gallery and Slideshow: show the users a roll of images without making the interface too chunky
    • Motion: great for catching the attention of the user. This adds interest and be intriguing to the user
    • Scrolling and Background Videos: This gives the user further control on the interface.
  7. Material Design: these make design appear more realistic to the viewer, such as shadows for depth, highlight and boldness on sections, colour palettes and make the user experience very easy with a simple design.
  8. Responsive Design: Creating a fully functional design on multiple devices and make it easy for the user to navigate through sections. This keeps the site minimalistic, simple, structured and organised.
  9. Flat Design: works well with a minimalist and a responsive web design.

References:

Responsive Web Design [Image] (N/A). Retrieved March 19, 2019, from: https://www.vervesearch.com/best-practice-guides/responsive-web-design/


Week 2: Process and Context

When designing an Interactive, you need to consider the concept of context and the process. Bill Verplank (2000) has illustrated the eight steps for the process of interaction design, beginning from the coming up of the idea to the presentation.

Image result for bill verplank process
Verplank’s Process (2001)

As a designer we are open to using different tools and learn techniques that assist us to create solutions. A lot of our ideas begin with a paper and pencil, visual diaries, notes, and even boards and these allow us to understand, define and frame the issue. We brainstorm different solutions, following steps, and missing information by the use of diagrams, flows and models. Sketches and notes can help us figure out what issue needs to be solved for and as well as aiming for what we need to achieve out of it.

Prototypes that we design should be trialed by people, most likely the target audience, who will be using either the device or interface in context. Personas need to be created for designers to understand people and how they interact, as well as giving scenarios for better responses. This is helpful, especially by using those who will use these interactives and have real needs from actual situations. As designers we need to know the use and techniques of ethnography and surveys, even giving prototypes to users and by asking their opinions after letting them experience the interactive a bit.

Context breaks into two uses:

  • Context for use
  • Contexts of use

When designing an interactive we need to understand what people are trying to do, how they may try to do it, what gets in the way and where they might be trying it. An interactive will be made for different reasons, the designer will create solutions once they understand the motivation for and the context of people’s behaviour. By observing the performance of user in scenarios, we can create interaction designs that satisfy their wants and needs and use their answers to improve our interactive design and become successful.  

References:

Verplank’s Process Framework For Interaction Design [Image] (N/A). Retrieved March 13, 2019, from http://www.billverplank.com/Lecture/

Week 1: Introduction to Interactive Design

Interaction design explores the connection between the user and digital products or services, these include the integration of buttons and links. Bill Verplank (2001) explains that Interaction Design is the focus of “A person interacting with the world and getting feedback from the world.”

Verplank’s Interaction Design Framework

Verplank’s Interaction Design framework consists of three questions (2001) designers need to question themselves, “How do you do, how do you affect the world, such as pushing buttons…How do you feel, how to get feedback from the world…finally how do you know, like the user needs a map or path of what to do.” As designers we have designed ways that digital products give feedback to the user and our expectation of what they can take away from it.

Every day we are interacting with many things such as our phone, friends and family, book and even a pen. With interacting with these, we satisfy our wants and needs and have a response and feedback after each use. Interaction can be more reactive or more engaging than others, but it is best to design something that are highly both engaging and reactive to the user.

References: