Downloaded 26 times
More Related Content
Drupal 7 UX –
- 1. Drupal 7 UserExperience Bojhan Somers & Roy Scholten
- 2.
- 3. 2008: Yes, it'sthat bad… 2 Usability lab tests Dries says it should be fixed Drupal UX-team
- 4. Core UX Drupal1, 2, 3, 4, 5, 6: focus on the developer Drupal 7: focus also on the content producer
- 5. 2009: Drupal 7UXMark Boulton Leisa Reichelt
- 6. Biggest UX problemsWhat is the front (site), what the back (admin)? Where is my content? Where do I find functionality? Many small issues
- 7. What is thefront (site), what the back (admin)?
- 8.
- 9.
- 10.
- 11. D7: Front Back
- 12.
- 13. Where is mycontent?
- 14.
- 15. Where do Ifind functionality?
- 16.
- 17. D7UX design principle80/20% rule: make common tasks easy, others doable
- 18. 80%: toolbar Newtop level admin sections Shortcuts
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. & manysmall issues… Interface text
- 26.
- 27.
- 28.
- 29.
- 30. The most effectiveway to improve your user interface is through copy writing.
- 31.
- 32. & somemore small issues… Workflow
- 33. Actions are nottabs
- 34.
- 35. Contextual links Demomovie on the next slide…
- 36.
- 37.
- 38.
- 39.
- 40. The future Challengesfor Drupal 8, 9, …
- 41. Page model BlocksFields (Display & Form building)
- 42. Module administration UpdatesModule management
- 43. Continued improvements InformationArchitecture Interaction design Usability engineering
- 44. Module maintainers Areyou creating “interesting” interfaces?
- 45. Pattern Library Howto use vertical tabs buttons fieldsets local actions Standardization
- 46. Drupal 7 UXwill be as good as contrib makes it.
- 47. Contact Drupal UXteam http://groups.drupal.org/usability twitter: @ bojhan & @ royscholten drupaluxteam @ gmail.com
Editor's Notes
- #2 Goedenavond, Bojhan Somers & Roy scholten - UX Maintinaers van Drupal 7 Betekend afgelopen 2 jaar, alle veranderingen op het gebied van UI Kleine, zoals tekst en grote zoals de informatie architectuur van drupal
- #3 Drupal is pretty hard IT takes a lot of time to learn simple things, cost a lot of time Biggest disadvantage of Drupal Holding back adoption
- #4 2008 Two usability tests painfully clear that usability of drupal sucks wake up call for the community, and especially Dries and I think the leaders of the community Eind of 2008 we have a UX team community recognition that we need experts, rather then the opinion of every single core developer.
- #5 Because of Drupal its technical approach, where our largest target group, the client – is usually negelected. The content writer. The focus of Drupal 7UX; Mark Boulton and Leisa Reichelt too focus on the content writer.
- #6 Maart 2009 – Aankondiging fulltime on the user experience of drupal 7 Big impact on the community A lot of old issues got revived New topics Sicne march Worked closley togheter - Feedback on their ideas -- Adapting their ideas to Drupal core
- #7 Uit lab test kwam naar voren Onduidelijk of je in de admin zit Drupal geen admin theme, visueel is er geen verschil tussen de admin en de site. Het vinden van content, nadat deze was gemaakt (komt niet op homepage) Deze functionaliteit is toch vrij cruciaal in een CMS Vinden functionaliteit Nadat je een plugin (module) heb geinstaleerd… dit terwijl je vaak 20/30 moet instaleren on any typical site. - Ten slote, werd Drupal getesiterd door vele kleine usability problemen – die in hun geheel eigenlijk nog voor meer verwarring zorgde dan de grote; de consistencie die vaak afwezig is, veel te veel help tekst, onduidelijke labels ect..
- #8 Especially new users run into this. Hard.
- #9 When you start out, it's not clear when you are in your site and when you are in the administrative area.
- #10 The default Garland theme in Drupal 6 is set as both the frontend and backend theme. Usability test has shown that this confuses people very much right in the first few minutes of use.
- #11 This initial confusion had to be taken away and for this a dedicated admin theme was designed
- #12 This theme is called Seven and was designed by Mark Boulton. It gives us the added benefit of providing a lot more visual consistency and an overall easier admin experience.
- #13 It's beautiful and you should use it and your contrib modules too
- #14 Right, one problem fixed. Next: When you create content in Drupal core, you have a 50% change your post will not show up on the front page (when creating a Page that is) – Meaning, users can then not find their content anymore. – Can't edit their content anymore. – Can't find where to new content anymore. Finding this content admin is hard, they are quite hidden away in the admin.
- #15 Well, can you find the content now you think? - 'Content' is a top level menu item - Add + Find content are default shortcuts
- #16 It's often hard to find critical functionality in Drupal 6. It becomes harder when you start installing some modules Drupal 6 heeft eigenlijk 1 grote sitemap, een grote dumping ground voor links…. Waarbij we 4 vrij los gedefineerde categorieen hebben, met daarin de functionaliteit gesorteerd op alphabet. En dit model bestond eigenlijk omdat Drupal, vooral om draaid dat je functionaliteit kan toevoegen zonder de core te hoeven hacken. Daardoor kon je niet bepalen, welke functionaliteit het belangrijkste is of welke met elkaar samen werken. Hierdoor onstonden er allerlei problemen, mensen kunnen functionaliteit niet vinden – maar voornamelijk functionaliteit die je in combinatie met elkaar gebruikte stond soms mijlen ver van elkaar vandaan.
- #17 Drupal 6 1 grote sitemap grote dumping ground voor links 4 los gefineerde categorien De functionaliteit gesorteerd op alfabet. modulaire informatie architectuur geen aannames maken op welke functionaliteit belangrijker is. Dit model - allerlei problemen - Als je een bepaalde workflow had, waarbij je meerdere modules nodig had Over de gehele pagina moest scannen constant, om het te vinden Geen verwachting patroon in voor de gebruiker, vaak zagen we dat die resulteerde tot de browser search om deze pagina te gebruiken. Nieuwe informatie architectuur – ik zal er enkele behandelen
- #18 We thoroughly re-organised the Information Architecture. A leading principle behind this reorganisation is this 80/20% rule. Let's see what we have done for the 80 use case…
- #19 To expose this “80%” functionality a toolbar was introduced. This toolbar exposes admin functionality even (or, especially) when looking at the front end. This toolbar consist of two parts: 1. A new set of top level links to main admin 'hubs'. 2. A shortcut bar for user defined quick links. Core offers two shortcuts: add content and find content. (Developers are using it now to add a shortcut to the performance page to quickly find the 'empty cache' button But there's this new index for admin functionalities. Lets quickly walk through some of them…
- #20 A direct link to the content listing. The 'Where is my content' problem, solved.
- #21 Structure collects all 'site building' functions. We expect only a few big contrib projects to add their stuff here. Think: Views, Panels, Organic Groups maybe? So, the tools to build front-end presentation with live here.
- #22 Configuring themes is maybe not a day-to-day task but it is one you'll quickly want to something with to personalise your project. The new layout of this page makes it much clearer which is the active theme
- #23 Managing user accounts and setting permissions is a frequent task for sure. Note how 'account setup' and
- #24 Aaah, the modules page. A heavily used page. We'll look at what we changed here in a minute…
- #25 And all other stuff goes here… The overall idea is this is the place to put all one-time setup, configuration stuff. Which makes this the container for a lot of possible items exposed by contrib modules. To cater for this and try to keep things findable we came up with an initial set of categories that tries to organise functionality in thematically grouped.
- #26 De vele kleine problemen zijn op te delen in twee onderwerpen… Tekst, copywriting in Drupal – is vaak gefocused op het zo gedetaileerd mogelijk uitleggen wat de functie doet, en het onsluiten van alle edge cases…. Eigenlijk veelal probeerde de tekst een slechte interface op te lossen. Workflow. - Vooral de navigatie naar functionaliteit waarbij je de context verloor.
- #27 Drupal heeft heel erg last van het fenomeen Omschrijving Puur alleen om het hebben van een omschrijving Elk field moet een beschrijving onder komen staan Toen we dit hadden verwijderd – konden we deze kleine winst, waar iedereen mee eens was gebruiken als patroon in Drupal
- #28 Drupal heeft heel erg last van het fenomeen Omschrijving Puur alleen om het hebben van een omschrijving Elk field moet een beschrijving onder komen staan Toen we dit hadden verwijderd – konden we deze kleine winst, waar iedereen mee eens was gebruiken als patroon in Drupal
- #29 A dramatic exmple of help text gone wrong - Users who started reading became more confused. Those that just started playing around understood the functionality much quicker - We even saw people finding this place for a task they were asked
- #33 De vele kleine problemen zijn op te delen in twee onderwerpen… Tekst, copywriting in Drupal – is vaak gefocused op het zo gedetaileerd mogelijk uitleggen wat de functie doet, en het onsluiten van alle edge cases…. Eigenlijk veelal probeerde de tekst een slechte interface op te lossen. Workflow. - Vooral de navigatie naar functionaliteit waarbij je de context verloor.
- #35 Something we say in usability testins is that many admin pages do not make a distinction between tabs for listings and that one action link to create a new thing This costs the user a coupl of seconds for each action, which adds up to the cognitive load. And - Dit koste per actie, vaak enkele seconde extra
- #36 This is a concept that evolved from community contrib modules The problem this solves is that through regular admin navigation, it often takes 4 or 5 clicks to find the right admin page for something you want to change. During this journay of clicks, you lose the context you wanted to apply this change to. What contextual links do is exposes actions on an object in the context of the object itself. Makes relevant tools much quicker and easier to find.
- #37 We saw shortcuts all a bit. It lets you add links to your specific favourite admin pages.
- #38 Everytime you install a new module you have to configure it and often set permissions as well. Even with the new information architecture, finding these configuration pages takes some time. To make this easier to do we expose these links in the context of installing the module. Because even experienced Drupal uses forget to set permissions from time to time, right?
- #40 Vertical tabs is a new pattern introduced in Drupal 7. Forms can get quite long in Drupal. Vertical tabs let you combine what would be multiple fieldsets below eachother into 1 compact widget. As you can see each tab has a little summary of the applied setting. Keep in mind that this pattern was designed to be ignored . Use it only for bundling settings that are not dependant on eachother and can be safely kept at their default settings.
- #41 Right, so far for the things we introduced for Drupal 7.
- #42 Drag and drop features Eliminate need to duplicate blocks to place in different regions De Manage fields display van Drupal 7 en CCK for that matter IS teribly confusin, far away from the action ( the object itself) Doesn’t allow formatters Field creation CCK workflow, is basically 3 years old and isn’t working for non technical users
- #43 Update management Updating core from a button Installing modules, and possibly features more streamlined Module management - The long list of modules, is not really usuable – it needs to be searchable and new modules need to pop to the top - The information on this page needs to be overhauld, there is too much information to make sense of it
- #44 We have only just started to revamp the Information Architecture We still need to make a lot of small or larger changes to addapt to new trends in -- Fields -- RDF -- Layouts (Blocks) Interaction design - We have a lot of interactions which are not great yet, for example menu creation, or simply block creation… - Interactions is what brings Drupal to be mature in terms of its UX, having good state transitions Usability engineering - Proper testing, a actual cycle of usability testing - Actual metrics to measure against
- #45 I think its fair to say that module maintainers tend to create “interesting” interfaces Special, unique interactions, unique interface elements Usually not needed, staying within the constraints of Drupal is a good thing When you use 40 modules you need to learn new interfaces on the fly
- #46 In the process of building a pattern library, we announced this at Paris and we havn’t really gotten any further But baiscally its about standardization of ui-elements so that people don’t make mistakes in applying the right pattern Greater consistentcy amongst contrib Less special interfaces More guidance, many developers doo want to create better interfaces