Week 5: Interface Design Review

Common boundary/Point of Interaction/In-between: Screens, buttons, navigations, blogs, user feedback.
The design of these devices between data > users.

Nicholas V Luppa: If the navigation functions so well, that the user does not notice the interface.

Old media> Passive consumption (one to many)
New Media>interactiviity (many to many)
Hit Record.org

Contemporary interactivity:

  1. Hyper-textual navigation: Use computer/software to read. Ie: Internet, game, harddrive. Link from one information to another. Vanevver Bush> The Memex 1945, not new: info onto computer. rapid access of info. before computers were built.
  2. Immersive Navigation: Extractive navigation, immersed by interface.
  3. Registrational Interactivity: To write back into the user experience
  4. Interactive Communications: face to face communication, live chat site


  1. Visual Focus
  2. Problem solving
  3. Contextual
  4. Conceptual
  5. Wholeness
  6. Linear/Nonlinear



Week 4: Static & Kinetic Screen: Play, Experience, Design

Screen can also be understood as a static medium, such as print.
Evolution of media forms, skills are evolving as we tackle media forms.
Adding to what we know,

static: motionless.
kinetic: relating to change over time or motion

produciton based: print media links connceting to kinetic design

Andy Polaine: experience designer, playful interactions> concept development
Play is fun> central to all production considerations eg: game.
what they do:purpose & function
what they look like: look & feel. research, user exp.
what they look like they do: steer the user, button>button. clear distinction
the experience of using them:
making complicated things easier and pleasurable to use

user= view & user. uses all sight especially sight
static graphic visual composition, craft and manipulation. visual heirachy in a ui. relative to eye tracking:

Module 2:

visual heirachy:
relationship effect they have on each other. order and placed relative to target audience and ui. info faster and easier for users.
infographics: mapping/datavisualisation: information arhictecture, navigation,
Gestalt psychology: can signal to users which elements in the ui are most important/useful.includes how its grouped and how it relates as a single whole.
“points of interest/focus point” leader of heirachy
entry point p.o.i(1st navigation/information)
sub point(2nd)
sub sub point (3rd)
via contrast sections, tones, dark light areas, shade of it, scale and weight, colour, proximity, typography: legibility(type) & readability(sentences)
text as user interface,

Week 3: Design Processes

The Design Process for Interactive Media illustrates communicating and understanding turning data into wisdom.
Taking a look at Nathan Shedroff’s diagram, which highlights the Interactive Design Process, the steps are as listed below.

  1. Pre-project: Initial planning, client briefs including proposal, budgets, and schedules.
  2. Concept & Planning phase: The most important process towards solving the problem. Goals, messages and concepts. Including strategies, flow charts, user and artefact personas.
  3. Design, Prototype & Specifications: A very complex stage in which designers create the experience within the visual design & workflow and the engineers do the coding and prototyping. Testing here is done with users to understand and solve problems.
  4. Production: Most questions should have been answered in the previous phase. Here, temporary working instances are created called “builds”. The first stages being Alpha 1, 2, 3 and then even when completed, the project will then go into beta mode for live testing.
  5. Testing: Here, it must be quality assured making sure that every link and every page works before going live. Each stage of testing, rebuilding and fixing is called beta 1,2,3.
  6. Launch/Maintenance: Here, the project is yet to be finished as sites still need to be updated with new content and also general maintenance of the website in order to continue giving users the ease of browsing.

Here is an example of the roles within a small design agency and the process

Planning: Personas & Scenarios

In order to plan, personas must be created to understand who you are creating for. A User Scenario is narrative describing foreseeable interactions of types of users/characters and the system. Including goals, expectations, motivations, actions and reactions.
A persona is a fictional character you create, in which you intend to be your audience. These are made to record and expand ideas, but also to inform. Eg: If the interface were a person, what would he/she be like?

Week 2: Interactive Design & Interactivity

The five components needed to understand and design interactivity are:

  • Interactivity
  • Information architecture
  • Time & Motion
  • Narrative
  • Interface

As Bill Verplank puts it the three questions we must ask ourselves as Interaction Designers are “how do you affect the world?”, “how do you feel?” and “how do you know?”
Essentially saying, how do we create something in which users can interact. How then do they feel about the ease of interactivity, and then lastly, how do they know it works?

As I reflect back on this lecture, it is clear that not only does the final product end up being the only thing that matters. The process in which that product goes through, to ultimately make it easier for a user to interact, is what is most important. Cognition is how users perceive the world, and as Graphic designers, we must be very wary of that.

Interactive Design & Interactivity

“Designing Interactive products to support people in their everyday and working lives”- Sharpe, Rogers, Preece, Interaction Design, John Wiley & Sons, Inc. New York, NY, USA 2002.

According to Alan Cooper (who is referred to as “The Father of Visual Basics”), Interactive Design is “a tool for damping those shifting requirements by seeing through the inability to articulate problems and solutions on management’s side, and articulating them for the developers.”
Essentially, what Cooper is saying is that Interactive Designers deal with the behaviours such as the solutions for their design problems.

The simple 3 step process described by Bill Verplank: Do? Feel? Know? pretty much sums it all up.
1. How do you affect the world?
2. How does the World feel about your design?
3. Do you know how to change it to better your design for the world?

During the design phase, the interaction designer works very closely to meet customers/clients needs. Then, during the detailed design phase, the designer works very closely with the programmers. So as important as it is to work with the programmers, you first off need to understand what exactly the customers needs are. In a way, the interaction designer is both a designer and an engineer.

This diagram by Clement Mok illustrates the various hats an Interaction Designer wears.

This is a very clear diagram which illustrates experience design, which relates closely to Interactivity design.

Week 1: Web 2.0

Web 2.0 is a loosely based term but basically encapsulates user participation across all sorts of social media, in which users are able to collaborate and share ideas and information.

Social media networks such as Facebook, Tumblr, Vimeo, Wikipedia are all websites that contribute to web 2.0. Facebook for example has over 1.5 million users, and contributing factors for its major success include thinking outside of the box. Rather than the standard keeping up with friends via profiles, photos and videos, Facebook also have millions of other things to keep users entertained. Such as apps and games like ‘Farmville’ and ‘Texas Hold’em Poker’. Facebook also has events, groups, private groups, and fan pages. All centered around to make life easier  and accessible for Facebook users. For example: Bands are able to connect directly with their fans through their pages.

So, in my opinion, Web 2.0 is extremely important to todays fast paced society. During the days of traditional media, news travelled either by word of mouth, television, the newspaper or radio. Today, we are able to receive live news updates in the palm of our hands, on our smart phones.

Apple iPhone 4s Siri ad.

Be sure to watch this video below, due to the expansion of the internet and technology, everything is possible. It really makes you feel small in this huge world of ours.

Web 2.0

Web 2.0 can be defined as the second generation of the World Wide Web. Within Web 2.0, there are various features which mainly focuses on the interactivity of its users. Users are now able to collaborate, sharing ideas and information across all platforms of social media.

Due to the revolution of technology, it is now particularly easy for participants to share their lives and information. A few examples of Web 2.0 include social networking sites such as Facebook, Tumblr, Twitter, Blogs, Wikipedia and web applications.

Sir Mitchell

As seen above, designers, artists, musicians, creatives, pretty much anyone can now share their works and ideas with the single click of a button. In turn, other users are able to leave feedback to show their appreciation.

Wikipedia is also another website contributing to Web 2.0. Here, users are able research, add, edit and delete information on any given topic in history, albeit its reliability.

Youtube also sees the ability for users to upload videos from their lives, sharing their creativity, knowledge, opinions and experiences. Kony 2012, a video by Invisible Children, just over a week old, has been viewed over 75million times. Ultimately, through the power and accessibility of social media, it is much more easier to create social awareness.

This is a general overview of what Web 2.0 is. For more information and a much more thorough look into Web 2.0, visit Tim O Reilly’s page, founder of O’Reilly Media, here.