1. APCHI2012 2P-90
Wireframing with Paper Whiteboard in Collaboration
SHIRASAWA Yoichi
Keywords:
Wireframing, Paper whiteboard, Sketch based Wireframe, HCD
1. INTRODUCTION 2. RERATED WORK
Sketch based wireframing proves useful in designing of mobile
application. In cases where sketching, it often use the followings way. Wireframing with paper and whiteboard
• Paper (ex. sketchbook and simili japanese vellum), Wireframing with paper and whiteboard are useful method. However, they have some issues.
• Whiteboard.
That is, wireframing with paper has to make technical drawings of screen again when designer
In this paper studies the new way of describe the wireframe of makes a drawing mistake.
mobile application. The followings indicate benefit of the proposed
method. It can describe the overall structure of the wireframe, and In addition, it is difficult to re-describe the overall structure of the wireframe. Then, it interferes
the focused screen. with study of design with team members.
• It's easy to re-describe the wireframe drawings,
• It can review and discuss the wireframe with team members in little
wait time.
3. PROPOSED METHOD
2. ペーパープロトタイピング
We propose the method of wireframing with paper whiteboard (Paper whiteboard wireframing).
The followings indicate the proposed method. The paper whiteboard has features a paper and a whiteboard.
Paper whiteboard wireframing
Paper whiteboard This method uses a cardboard cutout for the sketches that it allows the focus screen by
means of overlapping paper whiteboard. The mobile phone frame is created from a
This method uses the paper whiteboard to A1 format. The paper whiteboard is pasteboard. Therefore, it can describe the overall structure of the wireframe, and the
the whiteboard made from paper; this has the characteristics as a paper and a focused screen.
whiteboard. Table 1 shows drawing a comparison between the paper, the
whiteboard, and the paper whiteboard.
Bird’s eye view
It can describe the overall structure of the wireframe,
Shard attention / Progressive Disclosure
It can describe the User interface. Cardboard cutout helps maintain
the focus a usr’s attention.
＜Bird’s eye view＞ ＜Shared Attention＞
Structure User Interface
Table1. Drawing a comparison between 3 materials.
Modifiablity Portability foldability
Paper Low High High
Whiteboard High Low Low
Paper High High High
Whiteboard Cardboard cutout
Keeping the attention focused on wireframing Followings are notes about cardboard cutout .
Paper whiteboard is considerably littler time than Paper, when user re- Shared Attention
describe the wireframe . Miller said “10 seconds is about the limit for
Progressive Disclosure
keeping the user’s attention for dialogue”. We take it given that paper
whiteboard can keep the attention focused on wireframing.
Records
It takes pictures of the wireframe by smart phone camera for record purposes. It can be
recorded this design process.
4. DISCUSSION and CONCLUSION
DISCUSSION
Length of line Length of line
In order to evaluation in terms of usefulness the proposed method, then we tried to test it in
segment(marking out) segment(re-
workshop about design of smart phone application. The participants gave the following
marking )
comment after workshop: We could work in sharing the wireframe image.
Paper Indelible 947mm
Paper whiteboard 124mm Not require CONCLUSION
In this paper studied the new way of describe the wireframe of mobile application. This
study shows that paper whiteboard wireframing is useful for describe the wireframe of
mobile application with team members.