Firm foundation in the main hci principles, the book provides a working

Figure 4.14 GUI interface components: (a) form, (b) toolbar, (c) dialog box, (d) combo box.

---

7 2
H U M A N – C O M P U T E R I N T E R A C T I O N 
control if one needs to place or manipulate GUI objects in 
three dimensions. However, it is sometimes employed anyway 
in 3-D games for aesthetic reasons and the “wow” factor.
• Other (non-WIMP) interfaces: The WIMP interface is syn-
onymous with the GUI. It has been a huge success since its 
introduction in the early 1980s, when it revolutionized com-
puter operations. Thanks to continuing advances in interface 
technologies (e.g., voice recognition, language understand-
ing, gesture recognition, 3-D tracking) and changes in the 
computing environment (e.g., personal to ubiquitous, sensors 
everywhere)—new interfaces are starting to making their 
way into our everyday lives. In addition, the cloud-computing 
environment has enabled running computationally expen-
sive interface algorithms, which non-WIMP interfaces often 
require, over less powerful (e.g., mobile) devices against large 
service populations. Chapters 7–9 in this book take a look at 
some basic implementation issues for these new non-WIMP 
interfaces.
4.3 Wire-Framing
The interaction modeling and interface options can be put together 
concretely using the so-called wire-framing process. Wire-framing 
originated from making rough specifications for website page design 
and resembles scenarios or storyboards. Usually, wire-frames look like 
page schematics or screen blueprints, which serve as a visual guide 
(a)
(b)
Figure 4.15 3-D interface in 2-D interaction input space (e.g., mouse) for (a) 3-D task such 
as spatial navigation (SecondLife, http://secondlife.wikia.com/wiki/User_Interface) and (b) 2-D 
GUI elements laid out in 3-D space (EpicGames Scaleform GFx, https://udn.epicgames.com/Three/
Scaleform.html) (mainly for futuristic “wow” factor).

---

7 3
H C I D E S I G N
that represents the skeletal framework of a website or interface [8]. 
It depicts the page layout or arrangement of the UI objects and how 
they respond to each other. Wireframes can be pencil drawings or 
sketches on a whiteboard, or they can be produced by means of a 
broad array of free or commercial software applications. Figure 4.16 
shows such a wire-framing tool. Wireframes produced by these tools 
can be simulated to show interface behavior, and depending on the 
tools, the interface logic can be exported for actual code implementa-
tion (but usually not). Note that there are tools that allow the user to 
visually specify UI elements and their configuration and then auto-
matically generate code. Regardless of which type of tool is used, it 
is important that the design and implementation stages be separated. 
Through wire-framing, the developer can specify and flesh out the 
kinds of information displayed, the range of functions available, and 
their priorities, alternatives, and interaction flow.