Magnolia is a registered trademark owned by Magnolia International Ltd.

Photo (c) by Herzog & de Meuron (http://www.herzogdemeuron.com)

Andreas Weder, Head of UX design @Magnolia May 9 2013 for J. Boye, Philadelphia

There‘s Apps for that

Welcome

Andreas WederHead of UX design

Magnolia International Ltd.CMS vendor based in Basel, Switzerland

My task: build UI, shape UX of next gen product Magnolia 5Coming out on June 20 2013 after 2 yrs of hard work

Magnolia known for ease of use and flexibilitycurrent UI has grown stale: - feels and looks old- too simple to properly accommodate and handle new features- not easy to extend for us and for developers

Welcome

Beautiful, old city at the RheinOne of oldest university on the continentCMS hotspot: Adobe/Day CQ, Vignette and Magnolia

Version 1.1

We hate our CMS! anonymous editor

What I encounter in my daily work.

People are extremely unsatisfied with CMS UIs.The larger the product,the more complex the environment,the less satisfied.

Why is this?

Looked at this in a blog article

No focus on user needs

1

Version 1.1

CMS is the enterprise software that UX forgot

Karen McGrane

Recognized by othersContent strategist, Former Creative Director of Razorfish

Basically says: no focus on user needs in CMSes

Version 1.1

CMS is the enterprise software that UX forgot

Karen McGrane

customers focused on features

neglected backend application

industry is feature driven

Industry: instead of focusing on the user, we focus on featuresone way in highly competitive market to leave your competitors behind

Customers:- we receive large list with req features during RFPs- people who evaluate have no good idea of what their users need

Backend: UI receives no attention; users are expected to adapt (CMS experts group)

Version 1.1

CMS is the enterprise software that UX forgot

Karen McGrane

But also suggests that UXD is a solution

UXD to the rescue

focus on userstrategic decision

+quality -quantity

Strategic decision to put users first- holistic: not only usability, but also functional and emotional- typically higher quality features, but less of them

What we have to...or want to accomplish

2

Let‘s see how UXD copes with the 2nd problem

Consistent UI + Seamless UX

Undo/Redo

Easy to configure

Integrate workflow enginesWorkflows

Clear indication of states

Show web app pages & formsIntegrate external services

FlexibilityExtend with filters and servlets

Easy to extend feature-wise

Publishing for external appsIntegration

Show just HTML fragments

Open source

Adapt look to customer CD/CI

Easy to extend UI-wise

Site managementClear overview

Support multiple sites

Support for mobile devices

Core servicesSecurity & Permissions

Searching & filtering

Messages & notifications

Versioning

Content editingHandle user generated content

Visual editors

Tracking changes

Areas and Components

Content storage

Robust handling of problems

Multiple users and groups

ScaleabilityRun in the cloud

Handle temporary, heavy load

Handle 1000s of editors

Segmentation supportContent publishingMulti-channel publishing

Powerful, easy to understand templates

Publish for various devices

UI to handle many features

First look at major feature topicsOverwhelmingWhere to start?How to create something consistent, seamless?

An integrating elementlarge set of features

various user groups and tasksdata from many sources

easily extensible by third parties

Integrating element in complex environment

An integrating elementlarge set of features

various user groups and tasksdata from many sources

easily extensible by third parties

high complexityvery

Integrating element in complex environmentMany dimensionsTogether: highly complex puzzle

But we knowto deal with complexity

This requires new strategies

Divide and conquerA common strategy Deal with complexity on a high level

Split up a big problemSolve smaller problemsFuse all pieces together againAlign them into coherent entity

(c) by Apple

OS is where you can see thatUses Apps to provide interfaces for main topics you work on

(c) by Microsoft

Uses Apps to provide UIs for larger taskAlso built-in Apps to run the infrastructure

Imagine putting this into a menu

(c) by Microsoft

Apps allow us to

deal with UI complexity

I would conclude: apps allows us to deal with UI complexityIn Magnolia 5, we are using apps mainly for that

A entirely different interaction paradigm

What else makes Apps attractive?

Apps are focused

(c) by Apple

„Look at this app“ (describe)

Apps are focused

cover a set of related taskstypically on a single type of contentcan offer a narrowly focused UI

Good

Text editor, a web browser, Skype, a calendar app, the address book

A entirely different interaction paradigm

Apps are memes for modularity

(c) by Lego

Apps are memes for modularity

you think in bricks take modularity to the UIfeel natural as building blocksclear how and where to extend

make it clear how to extend your product.

Natural building blocks:- add App to edit & manage your content- add a sub app with your editor- extend Apps to change behavior- chain Apps in workflows- install an extension by installing an App (or module)

A entirely different interaction paradigm

Our take on apps

So does it work for web apps?Here‘s our take on this

A entirely different interaction paradigm

demo

What happens to a UI when we add Apps?

An entirely different interaction paradigm

Depending on how you realize itHub‘n‘Spoke

All images (c) by Samsung

The most radical implementation: Springboard navigationA button (physical / virtual) to return to the home screen

(c) by Microsoft, Apple

Desktop OS don‘t work like thatApps in a window, multiple windows side-by-sideFascinating: bringing back springboard-type navigation to Desktop- Apps run full screen (Windows 8!), Springboard is Hub

A entirely different interaction paradigm

What we have to watch out for

... if we add Apps to our UI

„Too many clicks!“

- Na. People don‘t mind the clicks, if they are mindless.- our user tests have shown that: people prefer clean interfaces.- It‘s one click more anyways.- We can implement shortcuts to reduce them again.

Disorient the user

- how do you switch between apps- how do you avoid disorienting the user while doing so- what about programmatic app switches?

Granularity of apps

What is an app, what not?One app or several apps?Clearly identify tasks and use cases first

Content stuck in app silos

- how do you access content managed by a different app?- how do you pass data between apps?

Avoid the UI wilderness

(c) by Apple

- enterprise is not equal to customer- easy to use, but also easy to learn functionality- easy to BUILD: behind sophisticated iPad apps is a large amount of work

Web apps have different mechanics

(c) by Hack N Mod, http://hacknmod.com/hack/5-awesome-web-apps-you-never-knew-existed/

- page based (less so with Web 2.0)- expectations towards a web app are different- proper support for browser history

A entirely different interaction paradigm

If you intend to add Apps

prepare for a bigger changefocus platform on core servicesintegrate instead of do-it-yourselfoffer framework to ensure consistency

Big change: turns into a platform, more like an OSCore services: CMS: content storage and servicesIntegrate: example: analyticsFramework: not just UI, but also services: messaging, switching

What I like about Apps

help us to deal with UI complexityprovide clear extensions pointsusers get the idea immediatelyforce us to think in tasks

But a lot to be gained

clear extension points: app contest: 25 app ideas in 40 minutes of which 10 were really greatusers: very used to apps

task: what is a task? what needs a UI? what tasks have to be addressed together?

Apps leave a lasting impression

oresund bridge between copenhagen and malmöimpression: this is one goal of UX design

Thank you!

Andreas WederMagnolia International Ltd.

@mgnl_uxma-ui.blogspot.chandreas.weder@magnolia-cms.com

Your questions? Your opinion!