Category Archives: Interactive Design Topic

❝ Interface Design Review ❞

Interface (“the in-between thing”) : 

  • Common Boundary
  • Between Thing(s)
  • A point of interaction within an interaction
  • Medium across which data passes

The level of transparency reveals the success of an interface, so in other words, if the interactive operates without any difficulties, that means the interface is effective as it became an ignored and forgotten function.


1. Hypertextual Navigation (users’ own research and decisions on selected information)

Image Source: Google Search


2. Immersive Navigation (Virtual reality – the generating of a simulated three-dimensional space)

Image Source: Counter Strike


3. Registrational Interactivity (Commenting and Responding within collective information)

Image Source: Facebook


4. Interactive Communications (person to person/face-to-face communication)

Image Source: FaceTime


Principles serve as broad guides

Draw on design theory

Emerge from print or poster design guidelines

User Perception


Six Fundamentals / Principles:

  1. Visual Focus : to show the focus of certain information as well as indicating functional elements.
  2. Problem Solving : multiple navigation and mapping pathways to gain access to expanded information.
  3. Contextual : anchoring of navigation tools in consistent locations to provide useful content and relevant links.
  4. Conceptual : Use familiar icons and graphics are placed in consistent context to help users’ operations of the interactive.
  5. Wholeness : Using various use of shapes, colour, contrasting and space to group related content and identify the structure and layout of design
  6. Linear / Nonlinear : The use of visuals and graphics to help identify the starting and ending of certain information.

Information Reference: Hughes, Greg. “Interface Design Review” Lecture. Interface Design Review. 16 Mar. 2012. Web. 25 Mar. 2012.


Tags: ,

Static and Kinetic Screen – Module Two

✄ – – – – Using What You Know!! – – – – 

The composition of visual elements : Visual Hierarchy.

1. Info-graphics (Guiding users through the use of information and content within visuals) –

  • Navigation
  • Mapping
  • Information Architecture
★ Graphic Design  ➔  Information Design  ➔  Interactive Design ★
a. Signage


b. Interactive Structures (Electronic Directories)












Image Source: 

2. Visual – Spatial Design (Gestalt Principles)

  • How information are grouped on the page
  • How visual elements on the page are interrelated
*so the information functions collectively as a whole, instead of being in bits and pieces.
a. Points of Interest
  • the focus point within the composition
  • works as the leader of the visual hierarchy
  • should not overtake the whole composition
  • should not be too weak or hidden
b. Contrast

  • the light and dark areas within the visual
  • the difference between visual elements within a work (i.e: the opposing nature)

c. Tone

  • The relative lightness and darkness of a colour
  • most often used to weaken or strengthen the point of interest
d. Scale and Weight
  • the relative size of the graphic form
  • it is closely related to the perspective and depth of the graphics
  • the dominance of size of graphic forms, which causes eye- tracking
  • An illusion of foreground and background of the graphics
e. Colour
  • effective use of colour can define areas and topics, as well as creating space between different informations.

f. Typography 

  • Legibility: How clear is the text visually? (the size of the text)
  • Readablilty:  The degree of the meaning of text is understandable, visually and conceptually. (user’s interpretation of the information)

Information Reference: Hughes, Greg. “Module 2: Using What You Know” Lecture. The Static and Kinetic Screen. 16 Mar. 2012. Web. 23 Mar. 2012.


Tags: , , , , ,

Static and Kinetic Screen – Module One

☆ Play : Experience : Design 

The on-screen designs now-a-days can be both static and kinetic, as it has evolved into an interactive medium through new developed and improved softwares and technologies. However, when designing interactive mediums, the considerations of static and print-based design still plays a significant role. Therefore, interactive designers are required to keep up with the changes in technologies and other mediums as well as incorporating their fundamental knowledges of designs into their creativity in order to produce adequately designed products targeting the accurate market.

  • Static : Motionless. (Elements that don’t move.)
  • Kinetic : Motion. (Elements that change over time.)
Andy Polaine . . .
“An experience designer focusing on playful interactions and service deisgn research in the fields of interactive concept development.” 







Image Source: Andy Polaine

** Polaine’s definition of interaction design **

It is the combination of how the basic elements actually functions:

1. What do they do?
Find the purposes of interactions through scenario description, pre-production and planning

2. What they look like?
Finding the look and feel of the actual product through research from target audience and scenario description that fits best. (i.e: drafts and non-finish art screens or storyboards)

3. What they look like they do?
A suitable interactive and physical treatment of elements within the visual of the designed product to assist the usability of the actual interactive product. (i.e: used like a guide in controlling the users’ experience of the product.)

4. Users’ Experience?
The feedback from users which are then used as guides for the designers to improve and modify on the visual designs on the interactive product.
Information Reference: Hughes, Greg. “Module 1: Play, Experience Design.” Lecture. The Static and Kinetic Screen. 16 Mar. 2012. Web. 23 Mar. 2012.


Tags: , , , , ,

Planning – Personas, Scenarios and Wireframes

User Personas is the fictional archetypal users, in other words, a typical of a certain kind of person that is created in order to help as a tool for the target audience research of designers’ projects. The persona is created in order to create user scenarios.

User Scenario is a possible narrative of a situation – which normally through the use of the created user persona – and the interaction between of the persona and the systems which are to be tested on. In order to have a more dependable outcome, there are a number of aspects which the scenario have to be looked into and these aspects are the persona’s reactions, the goals that he/she is trying to achieve, the expectations of the system and the motivation of the persona towards the interaction he/she has with the machine.

As for the Artefact Persona is the persona for the project, itself.

The image below is a visual diagram that shows the ten steps from research to creating the persona and with the interaction of the persona with the given situation, the scenario is created. From these creations of personas and scenarios, the designers can more easily identify the target audience of the product.

Image Source for Both Image

The image below shows the steps which through the use of the created persona and also the situation the persona is in with other aspects which needs to be taken into count in order to create an effective scenario.

Reference: Nielsen, Lene. “Ten Steps to User Persona By Dr. Lene Nielsen.” Usability and HCI: Indian Scenario by Dr. Dinesh Katre. HCI Vistas, July 2007. Web. 19 Mar. 2012. <>
Information Reference: Waterson, Sarah. “The Interactive Design Process: User Persona, Artefact Persona and Scenario planning” Lecture. Week Three –The Interactive Design Process: User Persona, Artefact Persona and Scenario planning. 27 Feb. 2012. Sat 17 Mar. 2012.


Tags: , ,

Design Process Overview

An Overview of the Design Process:

The design process is actually a continuous process which can be repeated for numerous of times. Through different stages of the design process, designers are able to progress and develop their ideas from the information and inspirations they gain from each experience.

Information Reference: Waterson, Sarah. “The Interactive Design Process Overview” Lecture. Week Three –The Interactive Design Process Overview. 27 Feb. 2012. Fri 16 Mar. 2012.



Interaction Design

What is interaction design?

The five essential elements for designing interaction:

– Interactivity
– Information architecture
Time and motion

However, in order to create an interface (a device or program that enables a user to communicate or interact with the computer), narrative, time and motion becomes the main aspects.  (Last accessed: 10.03.2012)

Within Bill Verplank’s lecture, he defines interaction design as three “how do …” questions.
– How do you do?
(How to interact with the world around us? What kinds of methods are to be used to interact with the world?)

– How do you feel?
(How to get feed back from the world? The feed back of how effective the methods that were used for people to interact with.)

– How do you know? 
(How to know and what to expect of the users’ knowledge of certain things in order to provide the right ways for them to interact and understand?)  (Last accessed: 10.03.2012)

Computer Games: 


Doodle Hangman.  (Last accessed: 10.03.2012)

Games are one of the most engaging type of interaction design, as it requires the user to think, engage and respond to different situations within the virtual world.

Media Video Files:

Black Rock Shooter. (last accessed: 10.03.2012)

Media Video Files are less interactive, since other than watching it, there may be no other interaction. So if the person actually don’t like the video that they are watching, it will not be engaging, in other words, the file won’t be interactive.
However, there is another type of interaction within video files which many young generation would know and it’s the reading of subtitles. SInce many videos now-a-days, may be in other languages which one may not understand and so subtitles is required. This form of interaction are starting to get popular with the raise in Japanese animation and other language films.
Information Reference: Waterson, Sarah. “An overview of interaction and interactive design” Lecture. Week Two – Interaction-Interactivity. 27 Feb. 2012. Sat 10 Mar. 2012.


Tags: , ,

Web 2.0 and Convergence

A contextual background to the design environment.

What is Web 2.0?

The main purpose of Web 2.0 is targeted towards the interaction and sharing of people within the online community.
Here are some of the Web 2.0 examples :

Image Source: (Last Accessed: 06.03.12)

Web 2.0 has brought about a major shift upon the entire notion of online information and research, as it allows people to distribute and edit information as they please. In other words, people that are sharing the information might not have any academic background, but rather distributing the information of that particular topic only based upon their own knowledge. A significant example of this is wikipedia.

Image Source: (Last Accessed: 06.03.12)

Media Convergence:

Media convergence is a common concept when signifying a range of methods within the media production content, especially when it comes to publication, distribution and consumption. In other words, it is the crossover of communication networks, computing and Information technology and the media’s content. From these forms an interactive online community (Web 2.0).
With the connection between the concepts of media convergence, participatory culture and collective intelligence forms the basis of the convergence culture. WIth the flow of content across multiple media platforms, audience can more easily engage, react and interact with such information.

Interactive Web 2.0 Examples:


Image Source: (Last Accessed: 06.03.12)

Image Source: (Last Accessed: 06.03.12)

Blog is a type of Web 2.0 only by the commenting of other people. Although some blogs now have things like “kisses” , “hugs” and “likes” for others to use as an interaction with the blogger. The interaction of users within blogs are still very limited as only comments are the only way to show interaction. In addition, certain blog websites might even need a day or two to process a comment, which in other words mean that the speed of the interaction process between the users would decrease.


Image Source: (Last Accessed: 06.03.12)

Youtube is an online broadcasting platform for people to share videos with one another, forming a whole online community of people interacting by recording and uploading their own videos for people around to world to browse, watch and comment on.



Image Source: (Last Accessed: 06.03.12)

Facebook is a well-known Web 2.0 social network, as it provides the platform for people to interact with one another through commenting and posting.


Information Reference: Waterson, Sarah. “An overview of online developments and the media context for interactive design.” Lecture. Week One – Web 2.0 and Convergence. 27 Feb. 2012. Web. 03 Mar. 2012.


Tags: ,