Mika and I look at what it takes to create great apps with Magnolia, and also present some of the new features of Magnolia 5.3. This is the version also containing notes; the nicer looking, but less informative can be found over at Magnolia's official channel: http://de.slideshare.net/Magnolia_CMS/how-to-design-and-build-great-apps Mika did quite some coding during our talk which isn't captured in the slides. Check out the video of the presentation to get it all: https://www.youtube.com/watch?v=hs4u5XNFi2g

1. GREAT APPS
HOW TO DESIGN AND BUILD
MCONF 2014 - ANDREAS WEDER & MIKAËL GELJIC
with 5.3
https://www.flickr.com/photos/diegojack/7715969896/
Photo Credit: Le Lavaux, de l’est à l’ouest
by Jacques (diegojack)

2. ANDREAS WEDER
DESIGNER AT HEART
ENGINEER BY TRAINING
love to build worlds
love to merge design (>10 yrs) & engineering (14yrs)

3. MIKAËL GELJIC
PROFICIENT CODER
PASSIONATE ABOUT THE USER INTERFACE
´
web & multimedia oriented background, shifted towards software engineering
little bit of a crush on good-looking UIs, well thought-out usability, good design

4. ®
Work in Magnolia’s product development team as
As head of User Experience and senior software engineer
Members of UX team (3 devs and Andreas)

5. IN THIS TALK
How to design and build great apps with 5.3
new guidelines to help you designing good apps
new 5.3 features to make apps more powerful
play with an actual example
demonstrate how we build apps
Show you how to design and build great apps with 5.3
how some new 5.3 features make apps more powerful
how new app design guidelines help you take the right decision to make app useful
give you a sneak peek in how we design and build apps

6. GREAT APPS ?
Photo: Therme Vals by Architect Peter Zumthor
What do we mean by that?

7. A GREAT APP
brings value to users
plays well with other apps
integrates well visually
integrates well from a functional perspective
is easy to understand and use

8. A good app is a tool….

9. … that works well…

10. … that’s not just part of a set of pieces …

11. … but pieces tied together carefully to provide for a great experience.
We’ve designed and built Magnolia with this goal in mind.

12. LET’S BUILD
A SMALL-BUT-GREAT APP
Instead of theory, let’s explore the topic using an example

13. PHOTO SCOUT APP
photos are stored on Instagram
scout looks at recent photos
suggests some to photo editors
ok photos are added to assets
photos are used on web pages
!
scout for great photos on Instagram
For today's example, let me introduce...
Scouts browse photos on Instagram, suggest good ones
Editors get these in their task inbox

14. KONIGI
Suggestion: do quick sketches on a 6-piece storyboard grid.
Avoids you get lost in details, only focus on what’s required
To be found at KONIGI.com

15. WHAT DO WE NEED?
Photo Credit:
https://www.flickr.com/photos/magdalenaroeseler/14045150739
by Magdalena Roeseler
Untitled
What do we need to get going? To build this with Magnolia?

16. WE NEED
an app to view photos
a way to access photos stored on Instagram
an interface to select which photos we want to see
Pulse to handle suggestions for photo editors
to copy a photo to assets
to be able to use the photos in our templates
Photo Credit:
https://www.flickr.com/photos/magdalenaroeseler/14045150739
by Magdalena Roeseler
Untitled
That’s a bit much to cover in all detail, but…

17. WE NEED
an app to view photos
a way to access photos stored on Instagram
an interface to select which photos we want to see
Pulse to handle suggestions for photo editors
to copy a photo to assets
to be able to use the photos in our templates
Photo Credit:
https://www.flickr.com/photos/magdalenaroeseler/14045150739
by Magdalena Roeseler
Untitled
As far as App design and Magnolia 5.3 are concerned...
We’re going to have a close look at these first four, more than enough for this session

18. DESIGN & BUILD!

19. 1. The app and its settings
2. Access photos on Instagram
3. Handle tasks in Pulse
DESIGN & BUILD!
We’re going to build this in three steps or iterations

20. THE APP
& ITS SETTINGS

21. WHAT TYPE OF APP SHOULD WE BUILD?
two major app types
- content: great for working with content
- offers browsing, CRUD operations for your content type, a picker to select items in other apps
- custom app: offers a lot more flexibility, but requires you to do more. Typically less suited when you just deal with content or assets
With both you can still add specific, custom functionality in tabs („sub apps“)

22. APP DESIGN GUIDELINES
Quick-bite recipe cards-style best practices
to ensure your apps look / work / play well.
You got 10 of them in the conf wallet

23. Available as part of our online documentation
https://wiki.magnolia-cms.com/x/CAFcAw
APP DESIGN GUIDELINES
You got 10 of them in the conf wallet

24. CHOOSE THE RIGHT APP TYPE
Content apps - great for managing custom data sets
Custom apps - if you need something really different
Let’s play our first card

25. Content apps - great for managing custom data sets
Custom apps - if you need something really different
CHOOSE THE RIGHT APP TYPE
two major app types
- content: great for working with content
- offers browsing, CRUD operations for your content type, a picker to select items in other apps
- custom app: offers a lot more flexibility, but requires you to do more. Typically less suited when you just deal with content or assets
With both you can still add specific, custom functionality in tabs („sub apps“)

26. Content app - quick, no need for more, benefit from
pre-built functions
CHOOSE THE RIGHT APP TYPE
Content app, because:
◦ there’s no need for more and we want to be quick
◦ we want to benefit from all the integration capabilities with other apps

27. HOW SHOULD WE CONFIGURE THE FEED?
User may select a particular user or tag name

28. Design pattern that work well for editing settings, for tools and, in
general, for things that users don’t need to touch often.
SMALL APP CONCEPT
Small app layout is for showing infos, hosting tools and settings.
Typically hosted in a tab, since we don’t have a „settings“ action or UI control.

29. Inform about basic settings. Show and enter license info.
Example: „About“ app
SMALL APP CONCEPT
Show infos and read-only settings.

30. Tool to verify global settings.
Example: „Mail tools“ app
SMALL APP CONCEPT

31. Form for global settings.
Example: „Mail tools“ app
SMALL APP CONCEPT

32. We’ll use it to define the photo feed to access.
SMALL APP CONCEPT
We’re going to use that for our settings as well

33. MOCKUP
Show images of two mockups:
- list of photos
- settings

34. MOCKUP
Show images of two mockups:
- list of photos
- settings

35. BUILD
• Demonstrate how content app is configured
• Browser subApp refresher
• Demonstrate how small app is configured
• emphasize SmallAppLayout, reuse of FormBuilder, action executor...

36. ACCESS
THE PHOTOS
Part 2: get access to the web service

37. HOW TO ACCESS PHOTOS ON INSTAGRAM?
How the heck…
No need for hacks any more.

38. Content apps may access content outside JCR
e.g. files on the file system; data in a relational DB; …
CONTENT CONNECTORS

39. BUILD
Show how content connector works
- How it can they be used to access Instagram (Vaadin container)
- Quick demo, what do we leverage from the content app framework

40. TASKS
IN PULSE
Part 3: handle tasks
going to use tasks to handle suggestions

41. BUT… TASKS IN PULSE???
Don’t worry: 5.3 improves on this a lot

42. Tasks are listed in a separate tab and display their current status.
Tasks are independent from work flow.
TASKS IN PULSE

43. Tasks can be sent to groups and assigned to group members.
Tasks are available in CE.
TASKS IN PULSE

44. OK. HOW DO I ADD A TASK?
UI to create a new task?

45. MOCKUP
Here’s the vision:
A simple dialog for picking the task

46. A REGULAR DIALOG?
A regular dialog feels to heavy for that.
It darkens the background, removes the context.

47. Designed for heavy duty editing with complex fields and forms.
REGULAR DIALOGS ARE FOR EDITING
We need sth else

48. When the form is a very focused, clear, simple task.
When a regular dialog feels too heavy.
When you want to preserve the surrounding context.
USE LIGHT DIALOGS FOR QUICK INPUT
We could use a regular or a light dialog.
New in 5.3: tailored to a single, quick, clearly focused task

49. Example: „Rename item“ dialog
USE LIGHT DIALOGS FOR QUICK INPUT

50. Example: Chooser dialog (narrow)
USE LIGHT DIALOGS FOR QUICK INPUT
This actually hasn’t been realized yet.

51. Example: Chooser dialog (wide)
USE LIGHT DIALOGS FOR QUICK INPUT
On top of a regular dialog: you pick an item, then you continue editing.
More complex (with tabs), but still a single, focused task: you pick an asset.

52. We’ve updated regular dialogs…
REGULAR DIALOGS IN 5.3

53. … to offer a WIDE settings as well.
REGULAR DIALOGS IN 5.3

54. We’ll use a light dialog for picking the task.
USE LIGHT DIALOGS FOR QUICK INPUT
!

55. BUILD
Show how task manager is used to create a new task
Config tasks / messageViews
SubmitPhotoAction

56. PHOTO SCOUT APP
an app to view photos
a way to access photos stored on Instagram
an interface to select which photos we want to see
Pulse to handle suggestions for photo editors
DEMO TIME! Use the app a bit, also show how a photo can be used in a template.
We’ve built it all.

57. YOU’VE SEEN
Some new features of 5.3 in action
connectors for content apps
handle tasks in Pulse
„open location“ action
focused, single task, light dialogs
connectors: to make content apps access content not stored in JCR
Pulse: new tab that shows tasks and their status; with group support
„open location“: to jump to an app & select item from anywhere in Magnolia

58. YOU’VE SEEN
Measures that affect a user’s experience
New app design guidelines
lead to a recognizable, consistent experience
your app plays well with other apps
Some of many UI improvements
wide dialogs
clarified alerts and notifications
keyboard support and focus indicators
alerts: beautified, clear & consistent button coloring & placement

59. QUESTIONS?

60. THANK YOU!
Photo Credit:
https://www.flickr.com/photos/timcaynes/6681394555/
switzerland12
by Tim Caynes