interaction design: building an ePortfolio
Blog
site map
resources
tools

Designing: interfaces

Interface design is only the experienced representation of the interaction design, not the interaction design itself. The interface is only what people see, hear, or feel and while it is immensely important, it’s only a part of interaction design.
(Saffer, 2006, p 122)

NOTE: The next two tasks could be divided between group members

 

Paradigms

“ A paradigm is a particular approach that has been adopted by the community of researchers and designers for carrying out their work in terms of shared assumptions, concepts, values and practices” (Preece, Rogers & Sharp, 2007, p.218)

Prevailing paradigm in interaction design?

  • Could all  group members draw a computer
  • Compare with each other – what did you draw?
  • Check out your responses with my predictions in Try It
  • try it
    What does this activity tell you about the current paradigm with which we are familiar when designing interactions for computer?

     

Emerging Paradigms

While the GUI is still a dominant paradigm in designing interactions for computers, it is now not the only one as the mid 90’s saw both the rise of the internet and also the computer extend beyond the desktop.

  • try it
    As a group brainstorm all the acronyms/names that you are aware of that describe computing beyond the desktop. Compare your list to the one in Try It.
  • Mark Weiser (1991), a Xerox Park research scientist, envisioned a world beyond the desktop. His thinking was a precursor to the current mobile, smart device developments that is burgeoning at the beginning of the twenty-first century. Briefly read at least one of Weiser’s publications in links to gain an understanding of ubiquitous computing
  • A range of new paradigms are emerging that is extending interaction design considerably as ideas of ubiquitous computing are now being researched and evolved throughout the world. This extends both the possibilities and challenges for interaction design. View the Apple Knowledge Navigator video to see how one major technology company has envisioned ubiquitous computing in the future.

Interface types

Preece, Rogers and Sharp (2007) take an historical view to describe interfaces and the user research issues associated with them. Interface development has followed the major trends in computing described by Weiser(1996):

  • Mainframe Computing where many people shared a computer and the interface was numerical;
  • Personal Computing- where interfaces evolved from the command line to the GUI;
  • Internet - Widespread Distributed Computing where interfaces began to evolve for various services and technologies and
  • Ubiquitous computing where Weiser believes, the interface will be part of everyday objects.

1980’s

Three types of interfaces were central to computer interaction of the eighties: command line interfaces, WIMP and GUI interfaces.

  • View the PowerPoint on this era of interfaces to understand some of the key research and design issues facing user interface specialists
  • In terms of icon design and menu structures, what do you need to consider with the product you are building

 

1990’s

Advanced graphical interfaces: multimedia, virtual reality; and speech, pen and touch interfaces provided new challenges for designers and researchers

  • View the PowerPoint on this era of interfaces to understand some of the key research and design issues facing user interface specialists
  • Consider the issues associated with Web based interfaces
  • Will a vanilla or mutilator approach be appropriate for the product you are developing?

 

21st century interfaces

The development of mobile devices has been a major influence in the development of twenty-first century interfaces. Associated with these are shareable, tangible, wearable and robotic interfaces.

  • View the PowerPoint on this era of interfaces to understand some of the key research and design issues facing interaction designers
  • Are there any issues outlined here that you need to consider for our current project?
  • What ideas are relevant for your mobile project?

Designing interfaces

Saffer (2007) provides some very practical advice for designing interfaces including discussions on elements of visual interface design, controls and widgets to consider and the use of icons, sound and other types of input devices outlined in the historical overview in Tab2.

NOTE: Use this section as a reference section for the design work you need to do for your projects.

Elements of Visual Interface Design

Saffer (2007) identifies four major elements to consider when designing interfaces: layout, typography, colour, material and shape. He argues that the way these elements work together is what defines the visual interface.

  • Explore the PowerPoint which summarises the elements Saffer identifies.
  • As you work through the various elements, begin to jot down some ideas for the product you are developing
    • what sort of grid will help facilitate the layout?
    • how will the visual flow need to work?
    • what typography considerations do you need to think about?
    • will colour have a role in your design – why or why not?
    • do you need to consider material and shape with this product?

Controls and Widgets

Saffer (2007) also identifies a range of controls and widgets that are part for the palette of interaction designers. Most of these you will already know - however it's useful to consider what controls and widgets may be appropiate to the current product you are developing.

  • Explore the PowerPoint which summarises the range of controls and widgets used by interactive devices or products
  • As you work through these controls, begin to jot down any widgets that your product may require.

To do

This section should have helped you gather some ideas for the visual interface of your product. Remember the visual interface is really only the physical representation of the conceptual model which is the most important part of the design,

  • what paradigm does your product belong to?
  • what are the major design considerations that arise from this paradigm?
  • in terms of icon design and menu structures, what do you need to consider for your product?
  • your product is a web based application – are you going to take a vanilla approach (Jacob Nielsen) or a multiflavour approach to the homepage presentation?
  • What grid layout will work for your product? What typography and colour decisions will be relevant to your design?
  • What type of widgets will be relevant for the tasks the users are doing using your product?

With this knowledge, its time to consider the various tools that are available to begin to communicate both your conceptual model so you clients can give feedback and then the physical design.

 

 

 

Assessment
learning tasks Tools Design basics get to know one another Develop a company website what is interaction design? what is an ePortfolio get to know one another Develop a company website What is Web 2.0? what is an ePortfolio get to know one another what is web 2.0? what is interaction design? what is an ePortfolio develop a company website what is web 2.0? what is interaction design? what is an ePortfolio get to know one another Develop a company website What is Web 2.0? what is interaction design
ePortfolio
Mobile Design
Site info