Talk about the design process for the Views 2 user interface. Views 2 is a query builder for content display in the Drupal CMS. Talk was presented at Drupalcon 2008 in Szeged, Hungary.

1. Views 2
Designing the user interface
Roy Scholten

2. hi

3. Views
.

4. Views 2

5. Views 2
have you heard of it?

6. Views 2
have you heard of it?

7. (views 1)

10. Problem:
How to avoid the
humongous scrolling form
of death?

11. ping

13. Huh?

14. Inventory

20. round 1: groups.drupal.org

29. “Guys, you're all redesigning
Views1 here…”

30. ping

31. “I havent asked merlin
thoroughly enough about
his starting points really.”
“I would say grokking
merlin's intentions is step one.
Otherwise we are designing
the UI in a fog.”

33. What do I want to display?
How do I want to display it?

34. round 2:
Sentences
(or: “What is really going on here?”)

35. extasdg
●

36. What do you want a list of,

37. What do you want a list of,
Where do you want to show it,

38. What do you want a list of,
Where do you want to show it,
How to present it, using which

39. What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?

40. What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?

42. What do you want a list of,

45. What
Where do you want to show it,

51. What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?

52. “… a system where the base edit page is
●
basically not editable, but gives you a summary of
everything on the view and then leads you to
separate pages where you can edit these
items…”

54. Summaries

57. a month later…

61. Good?
●
- vertical tabs
●
- summaries
●
- compact
●

62. Bad?
●
- overwhelming
●
- inconsistent with core
●
- abstract terminology
●

64. ●
Let's do this more
●
often…

65. Tips
Ask for input
●

66. Tips
Design before coding
●

67. Tips
Wireframes
●

68. Tips
Usability Testing Suite
●
(d.o/project/uts)
●

69. What's next?
●
Let's do this more often
●

70. ●
discuss…
●

71. ●
●
merlinofchaos yoroy alpritt couzinhub
●
●

72. ●
Thank you!
●

73. ●
●
(encore)
●

76. Views 2
Designing the user interface
Roy Scholten
http://www.yoroy.com

77. Click to add title
Views 2
Designing the user interface
Roy Scholten
1

78. Click to add title
hi
2
Hello, my name is Roy Scholten.
I am an interaction designer.
I like to make drawings.
I create animations for fun and learning.
I use Drupal to build my websites.
I help building Drupal through design, copy writing
and improving the user experience.
I don't write a single line of PHP.
(and I'd like to keep it that way)

79. Click to add title
Views
.
3
Question for the audience: anybody not familiar with
the views module at all?
The basic idea is this:
You use views for creating and presenting lists of
your content, like
“10 latest blogposts”,
“5 top rated pictures” or
“all t-shirts available in xl, blue and in stock”.
A simple but very powerful concept, because indeed,
a lot of things on the web are basically lists.

80. Click to add title
Views 2
4
… next…

81. Click to add title
Views 2
have you heard of it?
5
Views 1, already a very powerful and indespensible
tool, right?

82. Click to add title
Views 2
have you heard of it?
6
Well, for Drupal 6, views was rewritten from scratch
to basically “make it extensible into every possible
direction.” Even more flexibility, even more settings,
even more complex…

83. Click to add title
(views 1)
7
This is not intended to be The Roadmap for The Way
to do all of our user interface design, but more of a
case study for a process that needs as much
attention as possible.
I am NOT an expert in this, nor am I the one who
came up with all this. Lots of people contibuted. But
I was involved from beginning to end, so I can give
you an overview of the process from my
perspective.
This is that overview.

84. Click to add title
Click to add text
8
I'm sure a lot of you do not need reminding of htis,
but still:
This is what the user interface for creating a new
view in Views 1 looks like with all fieldsets
expanded.

85. Click to add text
9
Views developer merlinofchaos realized this
approach would not hold for Views 2.

86. Problem:
How to avoid the
humongous scrolling form
of death?
10

87. Click to add title
ping
11
I don't know what I did that made merlin pick me to
ask for some ideas. But he did.

88. Click to add title
Click to add text
12
merlin invites yoroy to have a look at his first
mockup.
Arguments, Relationships, Displays, Overrides?

89. Click to add title
Huh?
13
Still, I could see that this was indeed a lot more
complex then views1
With only a vague idea of the new concept for views,
I started with looking at other software, making
screengrabs.
>>

90. Inventory
Click to add text
14
I dug into the not so pretty parts of the os x system
preferences…

91. Click to add title
Click to add text
15
Ah, modals (or popups, or what is called a sheet in
this specific example)
The ones you lock you into doing something in that
screen or cancel to leave that screen…

92. Click to add title
Click to add text
16
Oh, I liked this one from the start as well,
the upperpart is human readable, formatted as
spoken language.
Interesting…

93. Click to add title
Click to add text
17
I find myself looking more at desktop software then
other CMS's.
To me Drupal maps better onto the concept of an
operating system as a whole.
(For example the multisite feature)
Pathfinder is a desktop replacement for OS X, full of
settings and options and just a whole lot of
clickable bits very close to another.

94. Click to add title
Click to add text
18
But, my mental model voor views 1 has always been
“views is to nodes as smart playlist is to tunes”

95. Click to add title
Click to add text
19

96. Click to add title
round 1: groups.drupal.org
20
So with that, I quickly threw out a couple of ideas.
I posted these to g.d.o. solliciting feedback

97. Click to add title
Click to add an outline
●
21
Hmm, maybe we split the process up in a few steps,
something like in panels…

98. Click to add title
Click to add an outline
●
22

99. Click to add title
Click to add text
23
Multiple displays as tabs along the top

100. Click to add title
Click to add text
24
hey look, vertical tabs! But used for another subset of
the functionality here.

101. Click to add title
Click to add text
25
Or maybe a second row of horizontal tabs?

102. Click to add title
Click to add text
26
Enter couzinhub. Based on what he could learn from
the thread alone, he quickly responded with a lot of
sexy-looking wireframes.

103. Click to add title
Click to add text
27
But before you know it, people are focussing on
some misplaced icon…
Also… >>

104. Click to add title
Click to add text
28
But, most of the wireframes did not reflect the real
new features…

105. Click to add title
“Guys, you're all redesigning
Views1 here…”
29
Merlin gave an update on the important new
concepts in Views2:
- not nodes-only anymore
- multiple displays, multiples of each display
- different fields, settings, overrides…
This was very important for the thread. Most of this
had been discussed in IRC, but that info was not
available in the discussion on g.d.o.

106. Click to add title
ping
30
Meanwhile in IRC, alpritt connected with me. He was
curious about the wireframes and he had some
questions.
I soon found out I couldn't answer most of them…

107. Click to add title
“I havent asked merlin
thoroughly enough about
his starting points really.”
“I would say grokking
merlin's intentions is step one.
Otherwise we are designing
the UI in a fog.”
31
We went through merlin's mockup and his blogpost
outlining his initial plans.
This became the first of a series of late, late night
talks…

108. Click to add title
Click to add text
32
I showed alpritt my smart playlist analogy.
Again, views is to nodes as smart playlist is to tunes.
Talking this through, we ended up with chopping up
the main task of creating views along two
questions:

109. Click to add title
What do I want to display?
How do I want to display it?
33
Yes, isn't that mindblowing huh?
But it's exaclty these kind of simple
statements/questions that are very helpful
indicators for the organisation of a user interface.
It was really exciting to me, and I was very glad alpritt
was there to brainstorm ideas with.

110. Click to add title
round 2:
Sentences
(or: “What is really going on here?”)
34
It took some time before we decided to give it another
go and present our ideas-so-far to merlin
I had saved or initial chat, merlin read it and together
we talked things through.

111. Click to add title
extasdg
●
35
We realized we should really focus on understanding
merlin's plans well enough to be able to explain it in
simple language.

112. Click to add title
What do you want a list of,
36
After a few very late nights (damn timezones!) of
talking with merlinofchaos, this is what we cam up
with

113. Click to add title
What do you want a list of,
Where do you want to show it,
37

114. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
38

115. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
39
We summarized this on g.d.o. and this already made
things a lot clearer to people.
but more importantly,
the feedback we got showed us that we needed to
explain some more about the hierachy that is
implied by those four questions.

116. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
40
There was no way I could ever put that in words.
So I made this.

117. Click to add title
Click to add text
41
So I made this.
Now, this is a very schematic diagram and it doesn't
even propose a user interface at all, but it explains
a lot about how the different parts are related to
eachother. This would have been very difficult to
put in words. at least for me!
The four sentences about what where how and
format plus this diagram were the two big things we
learned and got a grip on in this first phase.

118. Click to add title
What do you want a list of,
42
So we started at the beginning, looking at the 'What'
part first.
Views must know what kind of things it will show a list
of. Because this defines which options will be
available later on.
Basically a technical requirement.

119. Click to add title
Click to add an outline
●
43
Inspired by our little sentences, I made this very
compact wireframe for creating a new view through
just one form-sentence.
This isn't used in the final version, but I think it's still
an interesting concept. Very compact and very
clearly communicating the idea behind views in
general.
Human readable playlist creation…

120. Click to add title
Click to add an outline
●
44
So, answering the 'what' was the easy part.
Creating a new view is a seperate step in the ui, the
next ones were a lot more complex so we moved
on…

121. Click to add title
What
Where do you want to show it,
45
Next up: 'Where'. meaning the different displays of a
view: where do you want to show it in your site: as
a block, as a page, as an rss feed etc.?
For this level we soon agreed on using vertical tabs
along the left side.
This list can grow big, horizontal tabs would be too
limiting for that. stacking this vertically just made
sense.

122. Click to add title
Click to add an outline
●
46

123. Click to add title
Click to add an outline
●
47

124. Click to add title
Click to add an outline
●
48
In v2, there's this concept of 'default' view.
it's the basic view that contains the defaults for the
settings you want to use.
Later in the process this default view was added as a
seperate view that has no display itself, instead you
must add at least one display to it to get a view you
could actually show.
This was another technical choice merlin had to
make.
But at this moment the default was still married to
one of the actual displays.

125. Click to add title
Click to add an outline
●
49

126. Click to add title
Click to add an outline
●
50
So vertical tabs for the displays.
Now on to the right part of those tabs: the actual
groups of settings.

127. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
51
These next two questions are closely related and had
to be considered as a whole
The first one defines the format of your list (list,
teaserlist, table…)
The second one defines the format for each item in
your view. (teaser, custom fields, full node…)
And because of the hierachy, the first one defines
which settings will be available on the 'per-item'
layer.
We had progressed nicely so far. But now we were
only at the start of the biggest ui problem: How to
provide quick access to all these configuration
options in a compact space, presented in a more
meaningful way then just link-dumping abstract
labels?

128. Click to add title
“… a system where the base edit page is
●
basically not editable, but gives you a summary of
everything on the view and then leads you to
separate pages where you can edit these
items…”
52

129. Click to add title
Click to add an outline
●
53
And it was Alpritt who misunderstood this prototype
by merlin in a very creative way.

130. Click to add title
Summaries
54
That word summaries a click somewhere in Alpritt's
brain linking back to another discussion about
'summaries' he'd had elsewhere.
He sketched out his interpretation and it was this
wireframe that provided the framework for the next
part of the ui problem:

131. Click to add title
Click to add text
55
summaries. add minimal yet useful info about the
current value(s) for each setting.
You click a setting to open it's form below.
It was this wireframe that gave merlin a solid direction
for how to build the interface:
item-summaries above
edit item-settings below
(notice how the displays are little stacks along the top

132. Click to add title
Click to add text
56
There was some more discussion about seperating
global settings from display-specific ones
In the end merlin just said no to this :-)
This is around the same time that the abstract
default view was introduced as the first vertical tab
in the list of displays.

133. Click to add title
a month later…
57

134. Click to add title
Click to add text
58
Merlin returns with a working prototype.
And really, from then on it was mostly finetuning the
layout and the design.
You can blame me for the way it looks now. I know
it's hugely inconsisten with the rest of Drupal. So, I
just tried to keep it as plain as possible.

135. Click to add title
Click to add text
59
I made a Garland inspired design, which was nice for
demo purposes of course, but not very friendly
towards other themes.
I also made some icons for the settings that had yet
another level of their own for configuration options.

136. Click to add title
Click to add text
60
So there it is, this is how the views ui was born.
For me it was very exciting but also kinda scary,
messing around with one of the most important
modules. But if felt really good to actually help out.
Props to merlin for asking for input and actually using
it as well!

137. Good?
●
- vertical tabs
●
- summaries
●
- compact
●
61

138. Bad?
●
- overwhelming
●
- inconsistent with core
●
- abstract terminology
●
62

139. Click to add title
Click to add an outline
●
63

140. Click to add title
●
Let's do this more
●
often…
64

141. Tips
Ask for input
●
65
merlin asking for input was key and it was what made
this process even possible at all.

142. Tips
Design before coding
●
66
Design before code. We the uninitiated could ask our
questions and give our input at the moment the
canvas for the gui was still blank.

143. Tips
Wireframes
●
67
wireframes, not mockups. avoid 'designing' them but
focus on conceptual sketches. or else people will
start critiqueing the design and lose sight of the
concept.
Images are a shared vocabulary between developers
and designers and can put a lot of information in a
small space and remove some of the jargon.

144. Tips
Usability Testing Suite
●
(d.o/project/uts)
●
68
We happily went along not testing anything at all.
There's this very cool GSOC project that aims to be a
simple online testing tool that can show you where
people click when they try to accomplish a
predefined task.
It will show where people get lost and thus tell you
which part of your interface is not communicating
itself clearly enough yet.

145. What's next?
●
Let's do this more often
●
69

146. Click to add title
●
discuss…
●
70
How can we make it possible for developers to
incorporate a design phase?
What would you like to see?
How would you like to be helped?

147. Click to add title
●
●
merlinofchaos yoroy alpritt couzinhub
●
●
71

148. Click to add title
●
Thank you!
●
72

149. Click to add title
●
●
(encore)
●
73

150. Click to add title
Click to add an outline
●
74
Oh, and I kind of did the same thing again recently,
be it on a much smaller scope:
Merlin was annotating a screenshot of the ui for the
views help docs.
This is his version.

151. Click to add title
Click to add an outline
●
75
This is mine.

152. Click to add title
Views 2
Designing the user interface
Roy Scholten
http://www.yoroy.com
76