Search

Views 2 UI design process

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    3 Favorites

    Views 2 UI design process - Presentation Transcript

    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)
    8. Problem: How to avoid the humongous scrolling form of death?
    9. ping
    10. Huh?
    11. Inventory
    12. round 1: groups.drupal.org
    13. “Guys, you're all redesigning Views1 here…”
    14. ping
    15. “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.”
    16. What do I want to display? How do I want to display it?
    17. round 2: Sentences (or: “What is really going on here?”)
    18. extasdg ●
    19. What do you want a list of,
    20. What do you want a list of, Where do you want to show it,
    21. What do you want a list of, Where do you want to show it, How to present it, using which
    22. What do you want a list of, Where do you want to show it, How to present it, using which Format for each item?
    23. What do you want a list of, Where do you want to show it, How to present it, using which Format for each item?
    24. What do you want a list of,
    25. What Where do you want to show it,
    26. What do you want a list of, Where do you want to show it, How to present it, using which Format for each item?
    27. “… 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…”
    28. Summaries
    29. a month later…
    30. Good? ● - vertical tabs ● - summaries ● - compact ●
    31. Bad? ● - overwhelming ● - inconsistent with core ● - abstract terminology ●
    32. ● Let's do this more ● often…
    33. Tips Ask for input ●
    34. Tips Design before coding ●
    35. Tips Wireframes ●
    36. Tips Usability Testing Suite ● (d.o/project/uts) ●
    37. What's next? ● Let's do this more often ●
    38. ● discuss… ●
    39. ● ● merlinofchaos yoroy alpritt couzinhub ● ●
    40. ● Thank you! ●
    41. ● ● (encore) ●
    42. Views 2 Designing the user interface Roy Scholten http://www.yoroy.com
    43. Click to add title Views 2 Designing the user interface Roy Scholten 1
    44. 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)
    45. 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.
    46. Click to add title Views 2 4 … next…
    47. Click to add title Views 2 have you heard of it? 5 Views 1, already a very powerful and indespensible tool, right?
    48. 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…
    49. 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.
    50. 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.
    51. Click to add text 9 Views developer merlinofchaos realized this approach would not hold for Views 2.
    52. Problem: How to avoid the humongous scrolling form of death? 10
    53. 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.
    54. Click to add title Click to add text 12 merlin invites yoroy to have a look at his first mockup. Arguments, Relationships, Displays, Overrides?
    55. 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. >>
    56. Inventory Click to add text 14 I dug into the not so pretty parts of the os x system preferences…
    57. 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…
    58. 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…
    59. 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.
    60. 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”
    61. Click to add title Click to add text 19
    62. 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
    63. 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…
    64. Click to add title Click to add an outline ● 22
    65. Click to add title Click to add text 23 Multiple displays as tabs along the top
    66. Click to add title Click to add text 24 hey look, vertical tabs! But used for another subset of the functionality here.
    67. Click to add title Click to add text 25 Or maybe a second row of horizontal tabs?
    68. 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.
    69. Click to add title Click to add text 27 But before you know it, people are focussing on some misplaced icon… Also… >>
    70. Click to add title Click to add text 28 But, most of the wireframes did not reflect the real new features…
    71. 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.
    72. 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…
    73. 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…
    74. 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:
    75. 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.
    76. 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.
    77. 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.
    78. 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
    79. Click to add title What do you want a list of, Where do you want to show it, 37
    80. 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
    81. 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.
    82. 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.
    83. 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.
    84. 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.
    85. 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…
    86. 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…
    87. 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.
    88. Click to add title Click to add an outline ● 46
    89. Click to add title Click to add an outline ● 47
    90. 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.
    91. Click to add title Click to add an outline ● 49
    92. 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.
    93. 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?
    94. 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
    95. 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.
    96. 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:
    97. 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
    98. 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.
    99. Click to add title a month later… 57
    100. 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.
    101. 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.
    102. 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!
    103. Good? ● - vertical tabs ● - summaries ● - compact ● 61
    104. Bad? ● - overwhelming ● - inconsistent with core ● - abstract terminology ● 62
    105. Click to add title Click to add an outline ● 63
    106. Click to add title ● Let's do this more ● often… 64
    107. Tips Ask for input ● 65 merlin asking for input was key and it was what made this process even possible at all.
    108. 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.
    109. 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.
    110. 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.
    111. What's next? ● Let's do this more often ● 69
    112. 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?
    113. Click to add title ● ● merlinofchaos yoroy alpritt couzinhub ● ● 71
    114. Click to add title ● Thank you! ● 72
    115. Click to add title ● ● (encore) ● 73
    116. 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.
    117. Click to add title Click to add an outline ● 75 This is mine.
    118. Click to add title Views 2 Designing the user interface Roy Scholten http://www.yoroy.com 76

    + Roy ScholtenRoy Scholten, 6 months ago

    custom

    1096 views, 3 favs, 0 embeds more stats

    Talk about the design process for the Views 2 user more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1096
      • 1096 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 65
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved