Lecture Week Five

Interface Design Review

Interface:

  • Common boundary
  • Between things
  • A point of interaction
  • Medium across which data passes
‘Good, clean, clear navigation is critical to the success of any interactive experience, but it is so basic that its excellence has to be a foregone conclusion’

Nicholas V.Luppa (2001)

‘Designers of interfaces whose users ask the terrible question “what do I do now?” when they suddenly find themselves at a dead end should surely consider another line of work’

Nicholas V.Luppa (2001)

Continue reading

Advertisements

Flash Animation Example

Australia Flag Animation

animation-hidden animation-show

Flash is one of the most commonly used Interactive Design software packages. It allows the user to create interactivity through animation and links, using a stage. Items are placed onto the stage and are time and link based, controlled by frames and scenes. The pictures above show the start and end steps in a simple animation I made of an Australian flag, using a pattern of hexagons.

Examples of Instructional Design

Instructional Procedure

instructionalsteps

Instructional procedures provide users with step by step instructions on methodically completing a process. In this particular example, the 7 step process of turning 3D printed parts into shiny porcelain like parts is documented, with the use of images to further instruct users visually. The tools required are listed at the start and pieces of advice are given throughout the documentation. To see this example in full, visit the link above.

Instructional Video

instructionalyoutube

Instructional videos take a step up in interactivity when giving methodical instructions to a user. Instead of just giving the user steps, they are visually shown to them in video, to give the user a better understanding of the procedure. In this particular example, they run through different methods of how to win at Scissors Paper Rock. Instead of the user just reading how to win, they can actually see what they have to do and how their hand movements should look like, instead of trying to imagine it from reading words. Also with the use of voiceovers and human demonstrations, it makes the video more interactive, as if they are talking straight to the user. To see this example in full, visit the link above.

Instructional App

instructionalfirstaid

Instructional apps take a further step into giving more interactivity through methodical instructions to the user. Instructional apps allow users to control where they want to go and what they want to learn about, whilst also incorporating step by step procedures, videos and demonstrations. In this particular example, the user is provided with a handbook on First Aid, allowing them to go where they want to when they want to through the use of touch, instead of going through a procedure in full (nonlinear design). This is great for emergency situations, if someone is bitten by a snake for example, they can direct themselves to find instructions on what to do in the event of a snake bite. The same goes for CPR and many other emergency situations, it will tell the user what they need to do and how long they will need to do it before continuing to the next step. To see this example in full, visit the link above.

What Is Instructional Design?

Instructional Design is the process in which instructional materials are designed, developed and delivered. It is the philosophy, methodology and approach used to deliver information, including aspects of question strategy, level of interaction, reinforcement and branching complexity. Instructional design involves the analysis of learning needs and systematic development of instruction, using instructional technology to develop these instructions. These instructions specify a method, that when followed, will provide the user with knowledge, skills and attitude.

What is an Instructional Designer?

An instructional designer is someone who creates and delivers educational training materials to businesses, educational institutions, online users or other organisations. Examples of educational training materials include:

  • eLearning courses
  • Videos
  • Manuals
  • Handouts
  • Interactive Media

Some things that Instructional Designers do include:

  • Work with subject matter to identify what users need to learn
  • Develop objectives and ensure content matches these objectives
  • Structure content and activities for learning
  • Create media to support learning
  • Evaluate new technologies to discover new and better ways to enhance instruction
  • Assist faculties in discovering methods of improving their instruction with technology
  • Conduct training sessions teaching users how to use new technologies and instructions
  • Conduct research studies evaluating the use of technologies and their impact on learning outcomes
  • Create training materials to accommodate self-learners
  • Manage the implementation of new technologies and instructions

Sources:

Instructional Designer Central
Christy Tucker
instructionaldesign.org

Lecture Week Four

Module 1: The Static ‘and’ Kinetic Screen

Static: Of forces not causing movement. Motionless.
Kinetic: Relating to change over time or motion.

Interactivity through the concept of ‘play’

> Play > Experience > Design

Interactions might be between people, machines and screens or between two or more people.

Interactive design is a a combination of how the following elements function:

  • What they do
  • What they look like
  • What they look like they do
  • The experience of using them

It is about making complicated things easier and more pleasurable to use.

  • User = All senses and capacities, especially sight
  • User = View + Use
  • User Interface (UI) includes visual composition
  • Eye-tracking – measuring where we are looking/the motion of the eye
  • Gaze plots trace the movement of users eyes
  • The larger the circle in a gaze plot, the longer they fixated on that area.
  • A series of erratic eye movements suggest that they were confused by the layout.
  • A series of controlled movements suggest they knew what they were doing.
  • This reinforces the need for user testing.

I think that research through gaze plots and user testing is a very helpful tool to assist interactive design. By using these tools, designers will be able to ensure success in their design choices based on their research.

Continue reading

Mood and Story Board Example

Mood Board

Mood boards are created using a collection of images related to the user:

Johnny Smith
John is a 75-year-old retired carpenter who still enjoys hikes in national parks and riding his Harley-Davidson. He looks forward to the local club raffle and a catch up with the boys on a Thursday evening. He also enjoys playing bingo, listening to local radio and watching old western movies with his wife Jill. As he gets older and has to visit the hospital more often, he prefers quick and efficient healthcare with simple, bold instructions and hospital signs. He aims to enjoy the rest of his life traveling a little and spending time with family, especially his grandchildren.

  • Location: Hobart
  • Toaster Usage: Unfortunately Johnny has never used a fancy new electric toaster
  • Computer/Internet Usage: PC, Occasionally browses the Internet with the help of his grandchildren.
  • Computer Skill: Novice user. Finds things too complicated on the computer to use. Has an email but doesn’t know how to use it properly.

Mood Board

Story Board

Storyboards show a sequence of screen captures showing what the final design is planned to look like. The two screens below show a simple interface that 75 year old Johnny Smith would easily be able to use, in the steps of pressing the next button to advance to the next step:

Toast1 Toast2

Examples of Interactive Design

Game Design

football_heroes3

Game design involves designing interactive solutions for entertainment. Games allow the user full control of what they want to do and provide challenging interactive situations, in many cases also allowing them to play and interact with other people. The example above shows an app called Football Heroes, an arcade based game that allows the user to create and customise their own football team. Through touch controls and feedback, users can set up plays and control their players on the screen during challenging matches that progressively get harder. Users also have the option to play in different modes, which includes playing against their friends or online for even more interactivity. For more information on this particular example, visit: Football Heroes 2015

Web Design

Responsive-website-design

Web design involves creating an online interface for users with menus and hyperlinks for navigation, just like this blog. Many forms of interactivity can be embedded into websites such as graphics, videos, sliders, flash animations, and modules with buttons. Web designers aren’t involved in just the interactive functionality of the website, but also the layout and navigation, to provide focus areas for the user and create an easy to navigate interface. Some features that can be included in the layout include breadcrumbs so that users can track the path they have taken, modules and sidebars that link to popular sections of the website, and graphics that are sized and coloured according to their importance. One of the biggest trends in web design at the moment is the use of responsive design, so that websites will adapt to the device they are using, whether it be a 27″ monitor that they are displayed on or a 5″ iPhone. You can see this in action by dragging the browser window to make it smaller and bigger whilst on this website on a computer.

User Interface Design

iPhone-6

Interactive design isn’t only concerned with the use of single applications, it also involves the user interface that these applications run off. User interface design is primarily concerned with navigation and feel, to allow users to get from place to place and easily see where they need to go. The example above features one of the most popular forms of interactive design on the market, the iPhone 6 with its operating system of iOS 8. iOS 8 allows users to create pages with rows of applications that they can swipe between to find the application they are after. Then with a press of the home button, they can return back to these screens to choose another application to go to. For more information on iOS 8 and the iPhone 6, visit: Apple – iPhone 6 – iOS 8

What Is Interactive Design?

Today the majority of websites and applications online are interactive, calling upon web designers to make a number of considerations drastically different to those decisions made by graphic designers.

Interaction designers strive to create useful and usable products and services. Following the fundamental tenets of user-centered design, the practice of interaction design is grounded in an understanding of real users—their goals, tasks, experiences, needs, and wants. Approaching design from a user-centered perspective, while endeavoring to balance users’ needs with business goals and technological capabilities, interaction designers provide solutions to complex design challenges, and define new and evolving interactive products and services.

Interactive Design has evolved to facilitate interactions between people and their environment, interactive designers are concerned with the interaction between users and computers.

Continue reading

Lecture Week Three

Interactive Design Process

Business Strategy

Brand strategy, creative brief, organisational strategy, technology evaluation, market research, request for proposal

Pre-Project

Client brief, budget, schedule, proposal

Concept + Planning

Microschedule, flowchart, proof of concept, feature list, design research, requirements

Design, Prototype + Specification

Workflow and storyboards, visual design and specs, user testing report, finished prototype, functional specifications, production matrix

Production

Beta build

Testing

Launch

Launch/Maintenance

Post mortem, style guides, archived assets

I believe it is important to follow this structure to ensure that the design is properly planned, well managed and always under control.

Continue reading

List and Flowchart Example

How To Use A Toaster

    The process is first listed, step by step:

  1. Wash hands
  2. Dry hands (Using electrical equipment)
  3. Ensure toaster is off
  4. Pick up slice one
  5. Place piece in left bread slot
  6. Pick up slice two
  7. Place piece in right slot
  8. Pick up plug end
  9. Plug in toaster
  10. Turn switch on
  11. Select preferred temperature/timer setting
  12. Push down lever
  13. Wait for toast to pop up
  14. Is toast toasted enough? (Yes/No)
  15. Remove piece one
  16. Remove piece two
  17. Switch off toaster at wall
  18. Unplug toaster from wall

Then these steps are placed into a flowchart, with a rounded rectangle representing the start/end, a rectangle representing a process, and a diamond representing a decision:
flowchart

Lecture Week Two

Interaction – Interactivity

In Interactive Design there are 5 key areas:

  • Interactivity
  • Information Architecture
  • Time and Motion
  • Narrative
  • Interface

In Bill Verplank’s interview with Designing Interactions, he describes that the interaction designer needs to answer three questions:

  • How do you do? How you affect the world.
  • How do you feel? How to get feedback from the world.
  • How do you know? How to make the user know exactly what they need to do.

This is illustrated in the image below.

designing-interactions

Bill Verplank (2001) Designing Interactions

I think that these ideas provide a good starting point in designing for interactivity.

Continue reading

Examples of Web 2.0

Facebook

facebook

Facebook is a social networking site that allows users to create a profile, post status updates for their friends to see, upload photos, videos and files and share links. Users get their own page and can comment, like and share things on their friends pages. Facebook gives users the options to create new events, inviting specified people, or even see who is currently online and chat to them live. Users can create groups for people with the same interest and can also create public pages for businesses and places, to involve them in this online community.

Stats from Zephoria show that:

  • More than 1.39 billion people worldwide use Facebook monthly, this increases 13% each year
  • There are 4.5 billion likes daily as of May 2013, a 67% increase from 2012
  • 890 million people log onto Facebook each day
  • There are five new Facebook profiles created every second
  • 510 comments are posted, 293000 statuses are updated, and 136000 photos are uploaded per minute on Facebook

Visit Facebook

WordPress

wordpress

WordPress.com is an online, open source, blog hosting and content management system that allows users to create their own website, just like this blog. Users can upload content, create new pages and posts, and structure their website with templates and widgets to create a website for personal or business use, This can be shared with their friends and the world.

Stats from ManageWP show that:

  • 48% of Technorati‘s Top 100 Blogs use WordPress
  • 74.6 million sites depend on WordPress
  • 22% of new registered domains in the US use WordPress
  • There are 6 new posts on WordPress.com every second

Visit WordPress.com

YouTube

youtube

YouTube is a video hosting website that allows users to upload their own videos for private or public use. It allows people around the world to discover, watch and share videos online. Users can create their own channels and subscribe to the channels of other users that interest them.

Stats from YouTube show that:

  • YouTube has more than 1 billion users
  • Every day people watch hundreds of millions of hours on YouTube and generate billions of views
  • The number of hours people are watching on YouTube each month is up 50% year over year
  • 300 hours of video are uploaded to YouTube every minute

Visit YouTube

What Is Web 2.0?

Web 2.0 is thinking behind the development of the website, taking the website from a form of publishing to a form of enabling functionalities, allowing users to use the web to form a community and provide content.

Web 2.0 is related to new ways which online content providers and users communicate, engage and socialise, as well as generate content, structure and share it. With the rise of online telephones, VOIP, blogs and social community websites, we can see the shift from the web as an information source, to the web as a medium of mass communication.

Web 2.0 is not a technology, it is a way of architecting software and business, it is a set of principles and practices.

Principal Features of Web 2.0

1. The Web as a Platform – has a gravitational core rather than a hard boundary
2. Harnessing Collective Intelligence – embracing the power of the web
3. Data is the Next Intel Inside – data management is a core competency
4. End of the Software Release Cycle – delivered as a service, not as a product
5. Lightweight Programming Models – quest for simplicity
6. Software Above the Level of a Single Device – no longer limited to the PC platform
7. Rich User Experiences – not just multimedia but also GUI application experiences

Sources:

Lecture Week One
O’Reilly Media

Lecture Week One

Web 2.0 and Convergence

In the past 3 years we have seen a massive shift in online design, web communications and the technology platforms that they are delivered on. There has been an enormous shift in the media landscape which converges the field of visual design and communication, called Web 2.0.

Web 2.0 is thinking behind the development of the website, taking the website from a form of publishing to a form of enabling functionalities, allowing users to use the web to form a community and provide content.

To reach a market of 50 Million people it took the:

  • Radio 38 years
  • Television 13 years
  • Internet 4 years
  • iPod 3 years
  • iPhone 1.5 years

I think that this continual rapid growth shows the future importance of Interactive Design.
More stats are shown in the video below.

Continue reading