There's Apps For That - How Magnolia 5 Uses Apps


Published on

Andreas Weder is Magnolia International's Head of UX Design. At J. Boye Philadelphia 2013, he talked about apps and Magnolia 5. Among others, he answered those questions: What does it mean to build a product based on apps? How will apps change a product's structure and how it looks and feels? What advantages do you gain and where are the pitfalls?

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

There's Apps For That - How Magnolia 5 Uses Apps

  1. 1. Magnolia is a registered trademark owned by Magnolia International Ltd.Photo (c) by Herzog & de Meuron ( Weder, Head of UX design @Magnolia May 9 2013 for J. Boye, PhiladelphiaThere‘s Apps for that
  2. 2. WelcomeAndreas WederHead of UX designMagnolia International Ltd.CMS vendor based in Basel, SwitzerlandMy task: build UI, shape UX of next gen product Magnolia 5Coming out on June 20 2013 after 2 yrs of hard workMagnolia 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
  3. 3. WelcomeBeautiful, old city at the RheinOne of oldest university on the continentCMS hotspot: Adobe/Day CQ, Vignette and Magnolia
  4. 4. Version 1.1We hate our CMS!anonymous editorWhat 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.
  5. 5. Why is this?Looked at this in a blog article
  6. 6. No focus on user needs1
  7. 7. Version 1.1CMS is the enterprise softwarethat UX forgotKaren McGraneRecognized by othersContent strategist, Former Creative Director of RazorfishBasically says: no focus on user needs in CMSes
  8. 8. Version 1.1CMS is the enterprise softwarethat UX forgotKaren McGranecustomers focused on featuresneglected backend applicationindustry is feature drivenIndustry: instead of focusing on the user, we focus on featuresone way in highly competitive market to leave your competitors behindCustomers:- we receive large list with req features during RFPs- people who evaluate have no good idea of what their users needBackend: UI receives no attention; users are expected to adapt (CMS experts group)
  9. 9. Version 1.1CMS is the enterprise softwarethat UX forgotKaren McGraneBut also suggests that UXD is a solution
  10. 10. UXD to the rescuefocus on userstrategic decision+quality -quantityStrategic decision to put users first- holistic: not only usability, but also functional and emotional- typically higher quality features, but less of them
  11. 11. What we have to...or want to accomplish2Let‘s see how UXD copes with the 2nd problem
  12. 12. Consistent UI + Seamless UXUndo/RedoEasy to configureIntegrate workflow enginesWorkflowsClear indication of statesShow web app pages & formsIntegrate external servicesFlexibilityExtend with filters and servletsEasy to extend feature-wisePublishing for external appsIntegrationShow just HTML fragmentsOpen sourceAdapt look to customer CD/CIEasy to extend UI-wiseSite managementClear overviewSupport multiple sitesSupport for mobile devicesCore servicesSecurity & PermissionsSearching & filteringMessages & notificationsVersioningContent editingHandle user generated contentVisual editorsTracking changesAreas and ComponentsContent storageRobust handling of problemsMultiple users and groupsScaleabilityRun in the cloudHandle temporary, heavy loadHandle 1000s of editorsSegmentation supportContent publishingMulti-channel publishingPowerful, easy to understand templatesPublish for various devicesUI to handle many featuresFirst look at major feature topicsOverwhelmingWhere to start?How to create something consistent, seamless?
  13. 13. An integrating elementlarge set of featuresvarious user groups and tasksdata from many sourceseasily extensible by third partiesIntegrating element in complex environment
  14. 14. An integrating elementlarge set of featuresvarious user groups and tasksdata from many sourceseasily extensible by third partieshigh complexityveryIntegrating element in complex environmentMany dimensionsTogether: highly complex puzzle
  15. 15. But we knowto deal with complexityThis requires new strategies
  16. 16. Divide and conquerA common strategyDeal with complexity on a high level
  17. 17. Split up a big problemSolve smaller problemsFuse all pieces together againAlign them into coherent entity
  18. 18. (c) by AppleOS is where you can see thatUses Apps to provide interfaces for main topics you work on
  19. 19. (c) by MicrosoftUses Apps to provide UIs for larger taskAlso built-in Apps to run the infrastructureImagine putting this into a menu
  20. 20. (c) by MicrosoftApps allow us todeal with UI complexityI would conclude: apps allows us to deal with UI complexityIn Magnolia 5, we are using apps mainly for that
  21. 21. A entirely different interaction paradigmWhat else makesApps attractive?
  22. 22. Apps are focused(c) by Apple„Look at this app“ (describe)
  23. 23. Apps are focusedcover a set of related taskstypically on a single type of contentcan offer a narrowly focused UIGoodText editor, a web browser, Skype, a calendar app, the address book
  24. 24. A entirely different interaction paradigmApps are memes for modularity(c) by Lego
  25. 25. Apps are memes for modularityyou think in brickstake modularity to the UIfeel natural as building blocksclear how and where to extendmake 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)
  26. 26. A entirely different interaction paradigmOur take on appsSo does it work for web apps?Here‘s our take on this
  27. 27. A entirely different interaction paradigmdemo
  28. 28. What happens to a UIwhen we add Apps?
  29. 29. An entirely different interaction paradigmDepending on how you realize itHub‘n‘Spoke
  30. 30. All images (c) by SamsungThe most radical implementation: Springboard navigationA button (physical / virtual) to return to the home screen
  31. 31. (c) by Microsoft,AppleDesktop 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
  32. 32. A entirely different interaction paradigmWhat we have to watch out for... if we add Apps to our UI
  33. 33. „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.
  34. 34. Disorient the user- how do you switch between apps- how do you avoid disorienting the user while doing so- what about programmatic app switches?
  35. 35. Granularity of appsWhat is an app, what not?One app or several apps?Clearly identify tasks and use cases first
  36. 36. Content stuck in app silos- how do you access content managed by a different app?- how do you pass data between apps?
  37. 37. 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
  38. 38. Web apps have different mechanics(c) by Hack N Mod, page based (less so with Web 2.0)- expectations towards a web app are different- proper support for browser history
  39. 39. A entirely different interaction paradigmIf you intend to add Appsprepare for a bigger changefocus platform on core servicesintegrate instead of do-it-yourselfoffer framework to ensure consistencyBig 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
  40. 40. What I like about Appshelp us to deal with UI complexityprovide clear extensions pointsusers get the idea immediatelyforce us to think in tasksBut a lot to be gainedclear extension points: app contest: 25 app ideas in 40 minutes of which 10 were really greatusers: very used to appstask: what is a task? what needs a UI? what tasks have to be addressed together?
  41. 41. Apps leave a lasting impressionoresund bridge between copenhagen and malmöimpression: this is one goal of UX design
  42. 42. Thank you!Andreas WederMagnolia International Ltd.@mgnl_uxma-ui.blogspot.chandreas.weder@magnolia-cms.comYour questions? Your opinion!