views 2 ui design process
DESCRIPTION
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.TRANSCRIPT
Views 2 Designing the user interface
Roy Scholten
hi
Views .
Views 2
Views 2have you heard of it?
Views 2have you heard of it?
(views 1)
Problem:
How to avoid the humongous scrolling form of death?
ping
Huh?
Inventory
round 1: groups.drupal.org
“Guys, you're all redesigningViews1 here…”
ping
“I havent asked merlinthoroughly enough abouthis starting points really.”
“I would say grokkingmerlin's intentions is step one.Otherwise we are designingthe UI in a fog.”
What do I want to display?How do I want to display it?
round 2:Sentences(or: “What is really going on here?”)
● extasdg
What do you want a list of,
What do you want a list of,
Where do you want to show it,
What do you want a list of,
Where do you want to show it,
How to present it, using which
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
What do you want a list of,
What
Where do you want to show it,
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
● “… 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…”
Summaries
a month later…
●Good?●- vertical tabs●- summaries●- compact
●Bad?●- overwhelming●- inconsistent with core●- abstract terminology
●
●Let's do this more often…
Tips
●Ask for input
Tips
●Design before coding
Tips
●Wireframes
Tips
●Usability Testing Suite● (d.o/project/uts)
What's next?
●
●Let's do this more often
●
●discuss…
●
●
● merlinofchaos yoroy alpritt couzinhub
●
●
●Thank you!
●
●
●(encore)
Views 2Designing the user interface
Roy Scholtenhttp://www.yoroy.com
1
Click to add title
Views 2 Designing the user interface
Roy Scholten
2
Click to add title
hi
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)
3
Click to add title
Views .
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.
4
Click to add title
Views 2
… next…
5
Click to add title
Views 2have you heard of it?
Views 1, already a very powerful and indespensible tool, right?
6
Click to add title
Views 2have you heard of it?
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…
7
Click to add title
(views 1)
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.
8
Click to add title
Click to add text
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.
9
Click to add text
Views developer merlinofchaos realized this approach would not hold for Views 2.
10
Problem:
How to avoid the humongous scrolling form of death?
11
ping
Click to add title
I don't know what I did that made merlin pick me to ask for some ideas. But he did.
12
Click to add title
Click to add text
merlin invites yoroy to have a look at his first mockup.
Arguments, Relationships, Displays, Overrides?
13
Click to add title
Huh?
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.
>>
14
Inventory
Click to add text
I dug into the not so pretty parts of the os x system preferences…
15
Click to add title
Click to add text
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…
16
Click to add title
Click to add text
Oh, I liked this one from the start as well,the upperpart is human readable, formatted as
spoken language.
Interesting…
17
Click to add title
Click to add text
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.
18
Click to add title
Click to add text
But, my mental model voor views 1 has always been
“views is to nodes as smart playlist is to tunes”
19
Click to add title
Click to add text
20
Click to add title
round 1: groups.drupal.org
So with that, I quickly threw out a couple of ideas.
I posted these to g.d.o. solliciting feedback
21
Click to add title
●Click to add an outline
Hmm, maybe we split the process up in a few steps, something like in panels…
22
Click to add title
●Click to add an outline
23
Click to add title
Click to add text
Multiple displays as tabs along the top
24
Click to add title
Click to add text
hey look, vertical tabs! But used for another subset of the functionality here.
25
Click to add title
Click to add text
Or maybe a second row of horizontal tabs?
26
Click to add title
Click to add text
Enter couzinhub. Based on what he could learn from the thread alone, he quickly responded with a lot of sexy-looking wireframes.
27
Click to add title
Click to add text
But before you know it, people are focussing on some misplaced icon…
Also… >>
28
Click to add title
Click to add text
But, most of the wireframes did not reflect the real new features…
29
Click to add title
“Guys, you're all redesigningViews1 here…”
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.
30
ping
Click to add title
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…
31
Click to add title
“I havent asked merlinthoroughly enough abouthis starting points really.”
“I would say grokkingmerlin's intentions is step one.Otherwise we are designingthe UI in a fog.”
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…
32
Click to add title
Click to add text
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:
33
Click to add title
What do I want to display?How do I want to display it?
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.
34
Click to add title
round 2:Sentences(or: “What is really going on here?”)
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.
35
Click to add title
● extasdg
We realized we should really focus on understanding merlin's plans well enough to be able to explain it in simple language.
36
Click to add title
What do you want a list of,
After a few very late nights (damn timezones!) of talking with merlinofchaos, this is what we cam up with
37
Click to add title
What do you want a list of,
Where do you want to show it,
38
Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
39
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?
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.
40
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?
There was no way I could ever put that in words.
So I made this.
41
Click to add title
Click to add text
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.
42
Click to add title
What do you want a list of,
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.
43
Click to add title
●Click to add an outline
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…
44
Click to add title
●Click to add an outline
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…
45
Click to add title
What
Where do you want to show it,
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.
46
Click to add title
●Click to add an outline
47
Click to add title
●Click to add an outline
48
Click to add title
●Click to add an outline
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.
49
Click to add title
●Click to add an outline
50
Click to add title
●Click to add an outline
So vertical tabs for the displays.
Now on to the right part of those tabs: the actual groups of settings.
51
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?
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?
52
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…”
53
Click to add title
●Click to add an outline
And it was Alpritt who misunderstood this prototype by merlin in a very creative way.
54
Click to add title
Summaries
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:
55
Click to add title
Click to add text
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 aboveedit item-settings below
(notice how the displays are little stacks along the top
56
Click to add title
Click to add text
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.
57
Click to add title
a month later…
58
Click to add title
Click to add text
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.
59
Click to add title
Click to add text
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.
60
Click to add title
Click to add text
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!
61
●Good?●- vertical tabs●- summaries●- compact
62
●Bad?●- overwhelming●- inconsistent with core●- abstract terminology
63
Click to add title
●Click to add an outline
64
Click to add title
●
●Let's do this more often…
65
Tips
●Ask for input
merlin asking for input was key and it was what made this process even possible at all.
66
Tips
●Design before coding
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.
67
Tips
●Wireframes
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.
68
Tips
●Usability Testing Suite● (d.o/project/uts)
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.
69
What's next?
●
●Let's do this more often
70
Click to add title
●
●discuss…
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?
71
Click to add title
●
●
● merlinofchaos yoroy alpritt couzinhub
●
72
Click to add title
●
●Thank you!
73
Click to add title
●
●
●(encore)
74
●Click to add an outline
Click to add title
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.
75
Click to add title
●Click to add an outline
This is mine.
76
Click to add title
Views 2Designing the user interface
Roy Scholtenhttp://www.yoroy.com