Tag: tutorial

Hi, this is the section where weekly posts notes from the lecture pods Week 1-7 will be located. To navigate through, you can scroll down or check out the tags #tutorial.

Introduction of Interactive Design

Interactive Design presents how design can influence a strong and easy communication  towards media or other circumstances. Interactive design allows producers to convey a message that engages or receive reactions from their consumers, designing industry has expanded their interactivity to help and to create different perspectives depending on the content.

An example providing interactivity design such as News Report sites, or Pollution Awareness Sites conveys a strong role of Interactive design to be informational and provide direction.

The important aspect of Interactive Design is to convey and to deliver a significant perspective on a theme or context. This allows the producers to connect with their audience through meaningful experiences. Important key aspects such as feedback, control, creativity, productivity and communication creates the appropriate communication of the point or message.

Introduction of Interaction Design

Interaction design influences and inspires the consumer to create actions without thinking.

An example of interaction in everyday life can be determined throughout daily activities such as driving, shopping, games etc. Quoted by Winograd, Interaction design “Creates a space for human communication and interaction.” Which introduces the mindset of how interaction design can guide and provide design for people. Verplank suggests and illustrates questions that allow graphic designs to consider, such as about how people act, how they feel, and how they understand. These factors play an important role of supporting interaction design and the thought process of interaction feedback.

Verplank Bill (2015) Designing Interactions.

Waterson Sarah (2019) Week 1: Introduction to Interactive Design.

Winograd (1997) Beyond Calculation: The Next Fifty Year of Computing, Springer-Verlag “Creates a space for human communication and interaction.”

Design Process Overview

The design process of interactivity allows designers to observe feedback from the audience.

Strategies that include the Diagram presented by Verplank, associates the unique and step by step analogy to identity the problem and how to present it within a design format.

Not all processes are perfect as there are many errors and barriers to overcome these, from an invention of the interaction to the presentation, the wide variety of tools and techniques designers can use is expandable and allows crucial data to be collected. All ideas sprout from pencil to paper, and methods of these strategies like flowcharts are storyboards help understand the research and develop a census to launch a successful project.

Furthermore, in order to validate these strategies, using the audience is completely necessary to aid the context, this also provides extensive feedback for the designer if the process is unsuccessful.

Context Of Use / Context For Use

Context of/for use can be interpreted in a number of ways. As a graphic designer, this tackles the ideas and processes of interactivity in society. Designers are required to go beyond solutions and create strategies when it comes to an interactive project, this means that designers should consider factors of what is best for themselves and for the audience. Making these design decisions are crucial to facilitate to their behaviours. In order to discover this context of use/of use, observing and testing prototypes and human interactive is necessary to complete this project.

Furthermore, Waterson presents a context of use, and a context of use with simple interaction.

“A person is at home checking their online bank for their amount, another person is at the supermarket checking their balance before going in to check out.”

These two different scenarios present different locations, different context, and different uses for and of.

If the person is at home and checking their balance, they are able to explore more into their details for transactions and other details. Where as if a person is in line, their main objective is to have knowledge of their balance. Two completely different scenarios are two different interactive context that Sarah has produced. This marvellous example aids the observation of human interactivity and displays how individuals achieve their goals.

Prototype interactivity for designers, are obligated to understand the information to display, and what people are trying to do and how, and what might interfere with what they may be doing. Interactive projects can help aid the viewer extensively and it is the designers job to fulfil that role. Therefore designers are required to understand what is needed and what is expected to design successful interactions, these strategies are to be considered when creating these works.

Design Patterns

In order to start working with displaying designs, suggestions such as starting with smaller screens such as mobile provides an effective use of structure. From as small as a mobile screen, to a tablet, then a laptop and a desktop, Waterson suggests that doing this method for interactive design allows us to prioritise and order our mental structure. Using desktop screens as a general point of departure, there may be minor errors that smaller screens such as the iPhone can have, eliminating this presents an effective overview.  Most projects on desktop provide a wide variety of different appealing designs and patterns. Interactive designs can go beyond style, having a constructive and appealing design is crucial to attract the audience to the interactive projects.

Furthermore, to consider these interactive patterns, Alexander suggests questions for graphic designers to ask themselves “Does it occur and it felt in the way we have describe it and the solution, does the arrangement we propose in fact resolve the problem of design patterns. “

In the end, patterns are just patterns, it depends on the type of site you are working with and the problem, design patterns are not only a solution and sometimes not appropriate, as designers should consider other factors first before resorting to design patterns.

Portfolio sites online are currently free to use, its simplified and minimal range of sites for the public to use have common patterns and layouts. Sites such as WordPress.com or Wix.com accustom to these layouts, these design patterns appear as appealing and attractive and guide users through a smooth experience. The more the consumers use these design pattern sites, the more it changes the way the audience consumes the web and explore interface patterns.

Types of Design Patterns

Another design pattern that is seen throughout websites is the “Hamburger” menu, it is recognisable for users as a simplified way to open a menu. These three horizontal lines can be used to navigate specific webpages, this also saves space on the design and is very effective with consistency. It is best described as a drawer men as a click or drag, it is a contemporary access for all users and makes interactivity easy to understand and guide though.

A design pattern such as an account registration button, also helps aid users to be interactive with their sites to sign up or to type a form out. This presents a manageable way to enable subscription and registration to all users.

Long scrolls are present in any form of screen,having long scrolls provides users with the ability to manipulate and understand multipage information or for storytelling. This simplifies navigation systems as the continuation of scrolling creates interactivity to be fun.

The purpose of card layouts are for scanning and concepts, these cards are the guidelines to placing specific information in which area that the designer wants. These are also referred to as content containers as they are easy to re-arrange depending on the blog spread, and comes in various shapes and sizes. Hero images are high definition images that presents the purpose of gaining the users attention, throughout blogs and portfolios, hero images play a massive role in providing interest to the users.

Animation presents effective storytelling, from advertisements to simple descriptions of animations can create many stories. Animation is also very interactive towards the users, it can be broken down into two categories, a lifestyle is represented as a primarily tool and can be seen as a pop up, parallax scrolling, or a small scale animation that presents loading bars or hover tools.

An example of loading animation entertains users when they are waiting, the more interactive it is the more entertaining users will experience. To consider these loading screens should match personality and palette to the according site.

Galleries and slideshows demonstrates a way to showcase multiple pictures without overwhelming users, this gives the users the chance to look through and depict these images and have the choice to view them or not. This is super effective for portfolios.

Motion animation unlike small scale and lifestyle, presents an interesting way to get the users engaging as a motion, this also intrigues the user to be entertained as well. The users can determine the pace of their motion animation and are in control of how interactive they want motion animations to be. Hero images can also be used within motion animation.

Material design uses a shadow effect to present depth of a textbox or a picture box, to make it realistic and creates a clean design to focus on the users experience. This interface can be experienced across all devices. Responsive design is a universal design that all inteface experiences with, the representation of responsive designs are simple and cheap for businesses to build a mobile friendly site, and to engage users to use mobile more. The responsive design experience provides performance as a key aspect to the users.

Flat designs are also very universal and provide a flat version of the site, it also provides a simple and minimal way of presenting the sites.

Instructional Design

Cmielewski discusses the use of instructional design and how visuals can influence the audience to create interactivity. These designs instruct individuals on how to do the action, or to explain how it works. In daily life, instructional design is constantly used everywhere, such as a parking meter, that instructs the time limit of your parking spot, or self serving shopping that tells details on the preference of payment. Visual instruction effectively presents the use and succession on teaching individuals how to interact, this also includes instructions for huge fields such as the medical field. In the workplace, designated visual instructions help aid nurses and doctors as a reminder, or to upgrade their skills and techniques. This is absolutely crucial as they help save lives, thus presenting an effective way for interactivity design to be interpreted.

Cmielewski explains that instructional design creates the key executive function within the individuals memory, the use of instructions can help even for the smallest of things. The memory holds lots of information that supports them, having an instructional design creates a layout of what is wrong and right therefore it is critical to have these methods in society.

All instructional design comes in many forms, whether visually drawn or photographed, the size, placement, and text is also very important as it allows the audience to have a simple understanding of the design. Cluttering of a instructional design may cause confusion, having less clutter will allow an effective way of instructing the objective. Photographs on the other hand, can be interpreted in many ways, it is seen as not as simple as visual design, as any movement can be seen in different perspectives. Having graphic versions of these designs create simplicity and easy to understand.

Types of interactive/instructional design

There are many ways of interactions that allow the individual to interact. Clicking buttons for example allow the audience to explore, giving them the adventure to click and go through pages, therefore making creative results

Conversation interactive is also another way of interaction, where the individual is creating a conversation and creates scenarios and variables that is suited to the user.

Manipulation interactive creates the use of drag and dropping elements, allowing users to have the freedom to click and interact wherever they decide.

Exploration interactive allows them to venture and creates a playful atmosphere similar to a game, having an open world interactivity is the effective way to allow users to be immerse and enjoy the interaction they receive, as well as different viewpoints of first or third person.

Although interactivity aids all users, there are many challenges to working with the suitable interactive that can be displayed on any system. The limited capacity of screen area, limits the way users are able to view, resolution results as decreasing such as phones, have smaller opportunities within the present time of screen base and 2D print base.

These two different designs reveal at different times to the response of the users actions, as well as laying the information of their actions and how they would use these instructions and their preferences.

Some many ignore illustrations where as some may take the time to enjoy illustrations, these preferences have different views and different interest in any order and pace, as all individuals are unique and have different aesthetic.

Redundancy presents the ability to do the objective in multiple ways, such as offering users options of type, providing heavy instructions or visual instructions, this allows the users to accommodate and have a sense of control when they are navigating.

It is important to allow the users to feel engaged in the interactivity, thus it is the designers job to fulfill that role for the users.

Personas

Personas are a way to determine how users will approach or use certain sites. Personas is a way to help portray the unique and different approaches to interactivity, and provide personality to the interactive. Personas create a visual outlook and feel for the site, as it allows designers to question how their project will look like, how they would react, or how to describe it.

Other factors to consider for personas is to understand the cross platform experience, where as users in their 20s may consider looking at sites on their phone device, where as older senior members, will most likely not consider looking at sites on their phones. The expectation of the site should determine how users explore or finding specific content, depending on who you are aiming your site to, it is crucial to understand and point the project towards the audience that is entitled to. There are many users who use a variety of sites to locate something specific, or a regular browse through interactive. Sites such as Ebay portray the needs of all users, having the choice to free roam browse, or use their search engine to find specific items for sale, as browse and search are fundamental for a large amount of users.

Mental Models

Mental models are thoughts forming around an idea or an activity, the word mental derives from the mind state, and a model that is a representation of the objective. All users experience these mental models as they are valued expectation, these mental models also help provide an outlook and a understanding of creating the site and how users will approach to this. Having mental models is key to creating an interactive site for all users to be satisfied. This is also important for designers to consider how users will approach a specific problem, as all users are different, mental models guide the flow of the design and allows your design to succeed in providing all the necessary needs for the audience.

Artefact Personas

Artefact personas contribute the communication of the project to the users. How would your site respond to the needs of an individual, and how does it communicate specific areas?

Artefact Personas are very useful for client meetings, as it gives everyone a context to individually evaluate the design preference of users, whether someone dislikes a feature, but someone else may like it. This development creates a personality design that fits towards the specific users and to comfort their needs and expectations. For example, Waterson discusses that medical device for elderly patients, would use their devices more if the personality of the interactive is similar to visiting a nurse. The tone of the site and style aids contributes greatly as a strategy to convey users to utilize sites often as it fits to their taste. Using keywords can also provide the experience to drive the overall design content, words reassure the users to feel comfortable in their zone and allow them to feel safe and determine on what they are looking for.

User scenarios are stories of a Persona that may re-enact when viewing a site. These scenarios portray their goals and information to reach a certain point of completion. User Scenarios are best portrayed as a way to guide Personas in a situation that they are not able to do on their own, as designers it is our job to help portray that guide to these users. The aid of User scenarios also portray potential problems for actual users who are in a similar situation.

The use of these scenarios not only represent users and their ways to navigation but also include how designers can fix their site to be more suitable to an audience.
These fictional narratives build a designer’s website and expands the level of interaction of help and guidance towards their goal.

For example, Michael is on his way to work but needs to put petrol in his car, he is on a budget and would like to go to the cheapest petrol station. Michael makes sure that he searches on his phone for the cheapest gas station. His car runs on diesel and is only specifically looking for that. Michael stumbles upon a site where it allows his options to be placed in. he was able to put in his nearest location and type of petrol for his car.

This example primarily points out how successful a Persona can portray their complication to the resolution. User scenarios are effective when it comes to aiding not only future users but for designers themselves.

UI Visual Design Patterns

User Interface Design Patterns alludes to how users are able to navigate throughout a site and how they interact with it. In order to successfully capture these patterns, we need to include factors such as different types of navigation and experiences to the design, as well as incorporating how the websites look pleasing to the users. Presenting the right tools for the users allow them to accomplish their goals are known as a pattern to guide users, incorporating a connection between the user and the experience allows the UI to be helpful and familiar for the individuals who use these sites. The requirement of balance between guidance and design aesthetic is crucial for every interactive designer should consider, if a website looks boring, dull, and uninviting it’ll create the atmosphere of the user to react negative towards the site. However creating a fun experience expands the users curiosity on exploration throughout sites and navigate on their own.

There are a number of visual patterns that a graphic designer must consider when creating their website for users, design patterns are a “Reference point for uses and designers.” Stated by Waterson. Patterns such as: Horizontal Menus, Carousel or Drop-downs help aid the UX to their interactions.

Tabs are known to be extremely common visual patterns, the term “Skeuomorphism” is commonly used in design fields and web design interior designs, tabs is a pattern where it allows users to separate content from each other and placing them in categories in their desire. It creates a clear indication to present data and categorization for users to feel organised when exploring through websites. An example such as searching for multiple recipes for their meal gives variety and choice for the users to interact with.

Drop-down menus is a simple pattern where it allows users to navigate sections of the site. This creates simplicity and saves space for specific content for the users. This organised pattern can be difficult to use as it may conflict with specific hierarchy of menus. The importance of hierarchy in menus represents that some sections can be in a drop down, in comparison to some that don’t belong together that isn’t in the specific topic or area.

Drawer menus provide quick access and spacing for a website, this plays a similar role to a hamburger menu however it is usually placed on the side. Drawer menus also help navigate information and important sections of a site including saving a huge amount of space as it gives users the choice to hide or unhide the section.

Search with dropdown options such as Google or Bing is a huge pattern for web design. This allows users to seek their desires and locates specific section of a website regardless of hierarchy, this is known to be a shortcut and prevents confusion for users who want a direct path to their location.

Big footer is a simplified navigation footer that holds quick access to specific sections such as “Home” returning sites and other information such as email disputes and social medias. These footers are also known to be a shortcut however its limitation towards footers is that it is limited to finding more specific pages.

The home button or link is represented as the standard web design’s starting location for the user, it is also known as the safe zone to locate home information and the starting point of user navigation. This reassures users who are unsure on where to go throughout navigating, are able to locate back to their original state on the home page.

There are many more navigation patterns that help users, all of these functions are able to support and guide users to their goal and our job as graphic designers is to allow them to accomplish that goal.