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

  • 887 views
Uploaded 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 …

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?

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
887
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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, PhiladelphiaThere‘s Apps for that
  • 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. WelcomeBeautiful, old city at the RheinOne of oldest university on the continentCMS hotspot: Adobe/Day CQ, Vignette and Magnolia
  • 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. Why is this?Looked at this in a blog article
  • 6. No focus on user needs1
  • 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. 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. Version 1.1CMS is the enterprise softwarethat UX forgotKaren McGraneBut also suggests that UXD is a solution
  • 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. What we have to...or want to accomplish2Let‘s see how UXD copes with the 2nd problem
  • 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. An integrating elementlarge set of featuresvarious user groups and tasksdata from many sourceseasily extensible by third partiesIntegrating element in complex environment
  • 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. But we knowto deal with complexityThis requires new strategies
  • 16. Divide and conquerA common strategyDeal with complexity on a high level
  • 17. Split up a big problemSolve smaller problemsFuse all pieces together againAlign them into coherent entity
  • 18. (c) by AppleOS is where you can see thatUses Apps to provide interfaces for main topics you work on
  • 19. (c) by MicrosoftUses Apps to provide UIs for larger taskAlso built-in Apps to run the infrastructureImagine putting this into a menu
  • 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. A entirely different interaction paradigmWhat else makesApps attractive?
  • 22. Apps are focused(c) by Apple„Look at this app“ (describe)
  • 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. A entirely different interaction paradigmApps are memes for modularity(c) by Lego
  • 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. A entirely different interaction paradigmOur take on appsSo does it work for web apps?Here‘s our take on this
  • 27. A entirely different interaction paradigmdemo
  • 28. What happens to a UIwhen we add Apps?
  • 29. An entirely different interaction paradigmDepending on how you realize itHub‘n‘Spoke
  • 30. All images (c) by SamsungThe most radical implementation: Springboard navigationA button (physical / virtual) to return to the home screen
  • 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. A entirely different interaction paradigmWhat we have to watch out for... if we add Apps to our UI
  • 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. 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. Granularity of appsWhat is an app, what not?One app or several apps?Clearly identify tasks and use cases first
  • 36. Content stuck in app silos- how do you access content managed by a different app?- how do you pass data between apps?
  • 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. 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
  • 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. 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. Apps leave a lasting impressionoresund bridge between copenhagen and malmöimpression: this is one goal of UX design
  • 42. Thank you!Andreas WederMagnolia International Ltd.@mgnl_uxma-ui.blogspot.chandreas.weder@magnolia-cms.comYour questions? Your opinion!