Taming Complexity: Drupal 8 UX

Taming
complexity:
Drupal 8 UX
Drupalcamp Finland, May 2013
Roy Scholten
@royscholten
yoroy on drupal.org

Drupal UX
Drupal 6 usability tests: disaster!
Drupal 7 usability: fxed many basic critical
flaws
Drupal 8 usability: hitting the really hard to
solve issues

Drupal 8 UX
Author experience
Site builder improvements
Mobile
Style guide
Process

Author UX
WYSIWYG
Edit in place
Content creation page

Site builder UX
Views
Modules page
Translation

Mobile UX
Responsive toolbar
Bartik and Seven are responsive
Not yet 100% of admin UI: inline edit,
drag&drop, feld UI…

Needs work:
● Mobile issues
● Style guide
● Blocks UI
● Views UI

Join UX team
● Groups.drupal.org/usability
● http://drupal.org/project/issues/
search/drupal?
issue_tags=Usability
● #drupal-usability in IRC

Thank you!
Roy Scholten
@royscholten
yoroy on drupal.org

Links, resources
● Usability group – http://groups.drupal.org/usability
● Usability issues – http://drupal.org/project/issues/search/drupal?
issue_tags=Usability
● Style guide proposal – http://groups.drupal.org/node/283223
● Style guide implementation – http://drupal.org/node/1953374
● Mobile issues – http://drupal.org/project/issues/search/drupal?issue_tags=mobile
● Views usability test – http://groups.drupal.org/node/267508
● Blocks UI – http://drupal.org/node/187525
● Spark – http://drupal.org/project/spark
● Content page research – http://groups.drupal.org/node/214898
● Content page designs – http://groups.drupal.org/node/217434
● Content page usability test – http://groups.drupal.org/node/229038
● Content page implementation – http://drupal.org/node/1510532

Author
experience
Why is this important?
You work on a site a couple of months. Your clients
might be spending years with the solution you
delivered.
These people are getting more influence in choosing
the CMS. Author UX is important!
Previous presentation mentioned that once in core,
functionality freezes. That's why it's important that
core provides good defaults, because it's likely not
extended with contrib modules

WYSIWYG!
Not news anymore, but yes, D8 ships with a wysiwyg
editor.
This is a mixed blessing of course, but at least this
saves some time in setting things up.
Up to you to apply it wisely.

Edit in place
A basic general rule for good interaction design is to
expose operations directly on the object that can be
manipulated.
D7 introduced contextual links as a first step
D8 will have edit in place where not only the link but
also the actual editing takes place on the object
itself.

Demo in firefox: customize teaser

Content creation
page
Edit in place is what it is: you edit existing content
more easily.
Creating new content is something else. The content
creation page is a very important interface for
content creator. Obviously.
We spent a lot of time researching, designing,
implementing an updated UI for this page

I can tell some more about the design process later,
to clarify how we get stuff done in core, but this is
the design we ended up with and have been
implementing.

Author UX
WYSIWYG
Edit in place
Content creation page
So,
WYSIWYG, Edit in place, Content creation page.
This also means that things like configurable editorial
workflows or content staging didn't really make it in
core. Enough room for contributed modules to
improve things!

Site builder tools
Which brings us to another category of user
interfaces.
And this is actually an important point to consider: it's
crucial to know for which kind of role you want to
improve things.
Design is about making trade-offs. No use to strive for
perfection. Know that when you optimize for X, you
are likely to make Y a bit harder to achieve.

Views in core!
This means a big increase of useful functionality
available out of the box. Talk about managing
complexity
It also means we still have a lot to do to bring more
consistency and efficiency to the user interface.
Usability testing showed that besides many parts of
the ui are (needlessly) complex and wordy, the
biggest issue is that it is not clear what you can
actually do with it.
Anyway…

Modules, D7
Ah, modules page. The page everybody loves to
hate.
This is the D7 version.
- list gets very long, hard to find stuff. Dependency
info clutters the page.
- Categories do not really help
This was a really tough page to redesign, lots of
opinions and some of the issues can't really be
solved.

Modules, D8
I think this whole design process got some 1000+
comments across multiple issues.
The trick is to get a proposal into a patch, not only
design
Usability test to provide data and prevent opinion
wars.
Two fixes:
- simpler first impression, less data up front
- live filter to reduce the list
DEMO

Translation UI
Translation UI and workflow has seen some changes
as well.

Site builder UX
Views
Modules page
Translation
This also means we did not:
- Redesign the Fields UI
- Made building menus/navigation easier
- Improve the Blocks UI significantly (but maybe)
Definately enough interesting challenges to work on
for Drupal 9 :)

Mobile
And of course, making the whole of the Drupal toolset
work on smaller screens provides some interesting
challenges.

Respon
sive
toolbar
One big obvious flaw with D7 admin on small screens
is that the toolbar breaks the layout completely.
A lot of energy went into making the toolbar work on
small screens.
It works! The UX is not completely smooth yet. And it
makes an excellent show case of the amount of
admin page we have.
DEMO

Installer
When discussing mobile use cases, you often hear
the argument that people wont do this or that on a
phone.
Maybe. But I think, if you 'can't imagine x or y, it's
more often a lack of imagination then that the
scenario is not feasible.
Maybe not now, but Drupal 8 is a tool for the next 4
years or so. And, as a framework, Drupal can't be
too specific about what parts to leave out. Aim is to
make 100% of admin responsive and usable on
small screens.

Bartik & Seven
responsive
DEMO: Responsive tables

Mobile UX
Responsive toolbar
Bartik and Seven are responsive
Not yet 100% of admin UI: inline edit,
drag&drop, feld UI…
This also means we did not:
- Redesign the Fields UI
- Made building menus/navigation easier
- Improve the Blocks UI significantly (but maybe)
Definately enough interesting challenges to work on
for Drupal 9 :)

Seven style
guide
Dedicated admin theme Seven introduced in D7. Big
win, fixed one of the most fundamental critical
usability issues.
But it needed to be extended to

Keynote showed Dries talking about distributions in
2006.
This is me sketching a UI pattern similar to what
ended up as the new modules page design.
In 2009.
On the one hand, the pace of innovation is very high.
At the same time it can years to change (improve)
fundamentals

Taming Complexity: Drupal 8 UX

Taming Complexity: Drupal 8 UX

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Taming Complexity: Drupal 8 UX

Similaire à Taming Complexity: Drupal 8 UX (20)

Dernier

Dernier (20)

Taming Complexity: Drupal 8 UX