P. 1
Developing a UI Design Pattern Library - A Case Study at eCraft (Master's Thesis)

Developing a UI Design Pattern Library - A Case Study at eCraft (Master's Thesis)

|Views: 3,376|Likes:
Published by Janne Lammi
Designing good user interfaces is difficult, and thus software development organizations
need effective and usable design tools to support design work. In this thesis a tool, a user
interface design pattern library which captures knowledge of good UI design and shares it
effectively in reusable format to the development organization, was developed for a
Finnish middle-sized IT organization called eCraft.

The theoretical part of this research starts with presenting different kinds of design
languages on the domain, where two main concepts are identified; usability guidelines and
UI design patterns. The different characteristics of these concepts are introduced, and their
strengths and weaknesses are being discussed. The primary conclusion of this research is
that UI design patterns is the best concept to document design solutions. Then, the current
way to design and develop user interfaces at the case company is analyzed in the empirical
part. The study showed that problems in UI design exist, and usability is not really taken
into account in daily development work. However, the company employees were willing
to develop their UI design skills, but they didn’t know how.

After the needs of the organization were recognized and design language for the company
was selected, literature review continues by researching different kinds of tools for
managing and sharing patterns. In addition, some interesting related concepts are being
surveyed. Based on these results, a solution for a UI design pattern library is developed
using some fresh ideas on this domain. The tool makes possible a living design pattern
language, whose structure and content gets modified and updated collaboratively by its
users.

The pattern language is integrated into company’s work processes and introduced for trial
use in few software development projects. Users’ experiences and attitudes of its usage are
collected after one and a half months usage period and also partly during it. The results
showed that the library is considered useful by its user and it makes UI design easier and
more efficient, bringing several benefits to the case company.

More UI patterns and a tool for building a design pattern library: http://patternry.com
Designing good user interfaces is difficult, and thus software development organizations
need effective and usable design tools to support design work. In this thesis a tool, a user
interface design pattern library which captures knowledge of good UI design and shares it
effectively in reusable format to the development organization, was developed for a
Finnish middle-sized IT organization called eCraft.

The theoretical part of this research starts with presenting different kinds of design
languages on the domain, where two main concepts are identified; usability guidelines and
UI design patterns. The different characteristics of these concepts are introduced, and their
strengths and weaknesses are being discussed. The primary conclusion of this research is
that UI design patterns is the best concept to document design solutions. Then, the current
way to design and develop user interfaces at the case company is analyzed in the empirical
part. The study showed that problems in UI design exist, and usability is not really taken
into account in daily development work. However, the company employees were willing
to develop their UI design skills, but they didn’t know how.

After the needs of the organization were recognized and design language for the company
was selected, literature review continues by researching different kinds of tools for
managing and sharing patterns. In addition, some interesting related concepts are being
surveyed. Based on these results, a solution for a UI design pattern library is developed
using some fresh ideas on this domain. The tool makes possible a living design pattern
language, whose structure and content gets modified and updated collaboratively by its
users.

The pattern language is integrated into company’s work processes and introduced for trial
use in few software development projects. Users’ experiences and attitudes of its usage are
collected after one and a half months usage period and also partly during it. The results
showed that the library is considered useful by its user and it makes UI design easier and
more efficient, bringing several benefits to the case company.

More UI patterns and a tool for building a design pattern library: http://patternry.com

More info:

Published by: Janne Lammi on Mar 30, 2010
Copyright:Traditional Copyright: All rights reserved

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/09/2013

pdf

text

original

Data analysis and interpretation are required to organize and understand the data.
According to Yin (2003, p.109), data analysis consists of “examining, categorizing,
tabulating, testing or otherwise recombining both quantitative and qualitative
evidence to address the initial propositions of a study”. In qualitative analysis the data
consists of words (e.g. from interviews), pictures or objects (e.g., artefacts).
Quantitative analysis instead involves analysis of numerical data.

Qualitative Data Analysis

Most of the data gathered in this study was qualitative, excluding questionnaire data.
Reported by Miles and Huberman (1994), the qualitative data analysis consists of
three concurrent flows of activity: data reduction, data display, and conclusions
drawing and verification. Data reduction means the data should be organized and
simplified meaningfully in order to prevent “data overload”. Data display is the
second element and goes beyond the data reduction. It means further organizing and
processing data into meaningful format, e.g. charts, graphs and networks, to allow
conclusion drawing and verification. To conduct the qualitative data analysis, an
analysis tool, affinity diagram, was selected to facilitate the analysis process. It was
used to analyze all the qualitative data collected, expect the data gathered from
artefact analysis, which was analyzed without using any specific analysis tool.

Affinity Diagrams

An Affinity Diagram is a tool that sorts large amounts of language data, such as
opinions and ideas, and organizes them into groupings based on their natural

relationships (UsabilityNet, 2003)
issues from the interviews
deviations. In this study it was
notes data.

The affinity diagramming process starts by writing or printing individ
from user data on sticky notes (such as post
sorted into categories on a white board or a wall as a workshop activity. The notes are
moved, grouped and rearranged over and over again until logical group
All groups are then named using notes with different color a
(Hackos & Redish, 1998, pp. 329
diagram was created using sticky
using mind mapping software
the affinity diagram is shown in figure 10.

Figure 10: A screenshot of a p

Quantitative Data Analysis

The numerical data gathered from the questionnaire was displayed in a matrix format,
also known as data sheet. The rows in a data sheet corresponded to the cases
(respondents) and the columns corresponded to the variable
The numbers in the cells then corresponded to the attributes of the cases.
data sheet averages and standard deviations
conclusions were drawn.

15

The entire affinity diagram is available
http://users.tkk.fi/~i80706/thesis/affinityecraft.mm

31

(UsabilityNet, 2003). It can be used to form an overall picture wit
issues from the interviews or observations but also to document small details and
In this study it was used to combine and analyze the interview and field

The affinity diagramming process starts by writing or printing individ
from user data on sticky notes (such as post-it-notes). Then, the notes are stuck and
sorted into categories on a white board or a wall as a workshop activity. The notes are
moved, grouped and rearranged over and over again until logical group
All groups are then named using notes with different color and reviewed again
(Hackos & Redish, 1998, pp. 329-331). In this study, the initial version of the affinity
diagram was created using sticky notes, but it was then turned into digital format
using mind mapping software to allow further processing15

. A screenshot of

the affinity diagram is shown in figure 10.

A screenshot of a part of the affinity diagram.

Analysis

The numerical data gathered from the questionnaire was displayed in a matrix format,
also known as data sheet. The rows in a data sheet corresponded to the cases
(respondents) and the columns corresponded to the variables of interest (questions).
The numbers in the cells then corresponded to the attributes of the cases.
data sheet averages and standard deviations for each question was calculated

affinity diagram is available in FreeMind Map format

//users.tkk.fi/~i80706/thesis/affinityecraft.mm

It can be used to form an overall picture with key
but also to document small details and
used to combine and analyze the interview and field

The affinity diagramming process starts by writing or printing individual findings
notes). Then, the notes are stuck and
sorted into categories on a white board or a wall as a workshop activity. The notes are
moved, grouped and rearranged over and over again until logical groups have formed.
nd reviewed again
the initial version of the affinity
notes, but it was then turned into digital format
A screenshot of a part of

The numerical data gathered from the questionnaire was displayed in a matrix format,
also known as data sheet. The rows in a data sheet corresponded to the cases
s of interest (questions).
The numbers in the cells then corresponded to the attributes of the cases. From this
calculated, and

in FreeMind Map format at:

32

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->