Magnolia‘s new UX Magnolia Unconference 2012

User experience design What is it all about

User experience - What it consists of

User experience - What it consists of

+ the experience

* holistic

* rememberable* emotional

UX design- Where it draws from

Information architecture

Interaction design

User research and testing

Visual design

Prototyping

+ listen and mediate+ integrate and shape

Usability engineering

UX design is not...

• ... a single discipline

• ... a step in the process

• ... about technology

• ... user interface design

• ... just about usability

• ... just about the user

FlUID research for Magnolia 5

• A world-class experience

• Supports me in my tasks

• Extensible and scalable

• Recognizable

• Inspired by touch devices

• Designed touch first

This is what we wanted to achieve.The goals we gave us at the beginning.But for designing for a UX, this is not enough.

Magnolia has always been a joy to usePerfectly fitting mantra for guiding UX development

- e.g. Instant Preview

- general appearance - focus on the task you‘re working on

Intuitive, where it makes sense, and maybe only after a learning effort by the user(the Trinity Icons aren‘t intuitive, but great, once you‘ve learned them)(the lights system IS intuitive)

Generous in appearance.• generous interface: profits from many years of experience in print design• screens become wider than high: from top, get to content quickly, move actions to sidebar

Fast to use- Dialogs: optimized for fast input- Keyboard shortcuts

Completing the pictureMagnolia 5 UI

A second look at what you‘ve seen

- Apps: -- focus on your tasks-- static part: installed by the customer- Pulse:-- incoming work items-- messages from system and the apps-- live information of the instance- Favorites:-- personalized work space

Hub and Spoke navigation to glue these elements together- allows to visually reduce complexity- introduces flexible, scalable, configurable navigation screen-

Favorites Execute your actions quickly

- personalization of your work space- fast access to often used actions

Dashboard Feel the pulse using meters

Dialogs Optimized for working fast

Optimized with lessons-learned from print graphics:- in general optimized look of dialogs- only certain width makes sense- „show all“ tab allows to edit all fields in all tabs at once

Search and Filtering Just another view

Remains a joy to use

• Faster to work with

• Safe to use

• Easy to extend

• Easy tracking, easy sharing

• Collaboration using Pulse

• Make it direct

• Fun to develop for

• Evolve the user interface

Faster to work with: keyboard shortcuts to launch apps, improve switchingSafe to use: undo/redo, copy/pasteEasy to extend: Content Data appsEasy tracking, easy sharing: followersCollaboration: static workflows vs. unstructured workingMake it direct: inline editing, drag and dropFun to develop for: target developers as user group in future releaseEvolve the user interface: break down app silo barriers

Thanks

Andreas WederHead of UX design

andreas.weder@magnolia-cms.com

@mgnl_uxhttp://ma_ui.blogspot.ch