GREAT APPS

HOW TO DESIGN AND BUILD
MCONF 2014 - ANDREAS WEDER & MIKAËL GELJIC
with 5.3
https://www.flickr.com/photos/diego...
ANDREAS WEDER
DESIGNER AT HEART
ENGINEER BY TRAINING
love to build worlds
love to merge design (>10 yrs) & engineering (14...
MIKAËL GELJIC
PROFICIENT CODER
PASSIONATE ABOUT THE USER INTERFACE
´
web & multimedia oriented background, shifted towards...
®
Work in Magnolia’s product development team as
As head of User Experience and senior software engineer
Members of UX tea...
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 t...
GREAT APPS ?
Photo: Therme Vals by Architect Peter Zumthor
What do we mean by that?
A GREAT APP
brings value to users
plays well with other apps
integrates well visually
integrates well from a functional pe...
A good app is a tool….
… that works well…
… that’s not just part of a set of pieces …
… but pieces tied together carefully to provide for a great experience.
We’ve designed and built Magnolia with this goal i...
LET’S BUILD
A SMALL-BUT-GREAT APP
Instead of theory, let’s explore the topic using an example
PHOTO SCOUT APP
photos are stored on Instagram
scout looks at recent photos
suggests some to photo editors
ok photos are a...
KONIGI
Suggestion: do quick sketches on a 6-piece storyboard grid.
Avoids you get lost in details, only focus on what’s re...
WHAT DO WE NEED?
Photo Credit:
https://www.flickr.com/photos/magdalenaroeseler/14045150739
by Magdalena Roeseler
Untitled
W...
WE NEED
an app to view photos
a way to access photos stored on Instagram
an interface to select which photos we want to se...
WE NEED
an app to view photos
a way to access photos stored on Instagram
an interface to select which photos we want to se...
DESIGN & BUILD!
1. The app and its settings
2. Access photos on Instagram
3. Handle tasks in Pulse
DESIGN & BUILD!
We’re going to build th...
THE APP
& ITS SETTINGS
WHAT TYPE OF APP SHOULD WE BUILD?
two major app types
- content: great for working with content
- offers browsing, CRUD op...
APP DESIGN GUIDELINES
Quick-bite recipe cards-style best practices

to ensure your apps look / work / play well.
You got 1...
Available as part of our online documentation
https://wiki.magnolia-cms.com/x/CAFcAw
APP DESIGN GUIDELINES
You got 10 of t...
CHOOSE THE RIGHT APP TYPE
Content apps - great for managing custom data sets
Custom apps - if you need something really di...
Content apps - great for managing custom data sets
Custom apps - if you need something really different
CHOOSE THE RIGHT A...
Content app - quick, no need for more, benefit from
pre-built functions
CHOOSE THE RIGHT APP TYPE
Content app, because:
◦ ...
HOW SHOULD WE CONFIGURE THE FEED?
User may select a particular user or tag name
Design pattern that work well for editing settings, for tools and, in
general, for things that users don’t need to touch o...
Inform about basic settings. Show and enter license info.
Example: „About“ app
SMALL APP CONCEPT
Show infos and read-only ...
Tool to verify global settings.
Example: „Mail tools“ app
SMALL APP CONCEPT
Form for global settings.
Example: „Mail tools“ app
SMALL APP CONCEPT
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
MOCKUP
Show images of two mockups:
- list of photos
- settings
MOCKUP
Show images of two mockups:
- list of photos
- settings
BUILD
• Demonstrate how content app is configured
• Browser subApp refresher
• Demonstrate how small app is configured
• emp...
ACCESS
THE PHOTOS
Part 2: get access to the web service
HOW TO ACCESS PHOTOS ON INSTAGRAM?
How the heck…
No need for hacks any more.
Content apps may access content outside JCR
e.g. files on the file system; data in a relational DB; …
CONTENT CONNECTORS
BUILD
Show how content connector works
- How it can they be used to access Instagram (Vaadin container)
- Quick demo, what...
TASKS
IN PULSE
Part 3: handle tasks
going to use tasks to handle suggestions
BUT… TASKS IN PULSE???
Don’t worry: 5.3 improves on this a lot
Tasks are listed in a separate tab and display their current status.
Tasks are independent from work flow.
TASKS IN PULSE
Tasks can be sent to groups and assigned to group members.
Tasks are available in CE.
TASKS IN PULSE
OK. HOW DO I ADD A TASK?
UI to create a new task?
MOCKUP
Here’s the vision:
A simple dialog for picking the task
A REGULAR DIALOG?
A regular dialog feels to heavy for that.
It darkens the background, removes the context.
Designed for heavy duty editing with complex fields and forms.
REGULAR DIALOGS ARE FOR EDITING
We need sth else
When the form is a very focused, clear, simple task.
When a regular dialog feels too heavy.
When you want to preserve the ...
Example: „Rename item“ dialog
USE LIGHT DIALOGS FOR QUICK INPUT
Example: Chooser dialog (narrow)
USE LIGHT DIALOGS FOR QUICK INPUT
This actually hasn’t been realized yet.
Example: Chooser dialog (wide)
USE LIGHT DIALOGS FOR QUICK INPUT
On top of a regular dialog: you pick an item, then you co...
We’ve updated regular dialogs…
REGULAR DIALOGS IN 5.3
… to offer a WIDE settings as well.
REGULAR DIALOGS IN 5.3
We’ll use a light dialog for picking the task.
USE LIGHT DIALOGS FOR QUICK INPUT
!
BUILD
Show how task manager is used to create a new task
Config tasks / messageViews
SubmitPhotoAction
PHOTO SCOUT APP
an app to view photos
a way to access photos stored on Instagram
an interface to select which photos we wa...
YOU’VE SEEN
Some new features of 5.3 in action
connectors for content apps
handle tasks in Pulse
„open location“ action
fo...
YOU’VE SEEN
Measures that affect a user’s experience
New app design guidelines
lead to a recognizable, consistent experien...
QUESTIONS?
THANK YOU!
Photo Credit:
https://www.flickr.com/photos/timcaynes/6681394555/
switzerland12
by Tim Caynes
Upcoming SlideShare
Loading in …5
×

How to design and build great apps (with moderator notes)

816 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
816
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to design and build great apps (with moderator notes)

  1. 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. 2. ANDREAS WEDER DESIGNER AT HEART ENGINEER BY TRAINING love to build worlds love to merge design (>10 yrs) & engineering (14yrs)
  3. 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. 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. 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. 6. GREAT APPS ? Photo: Therme Vals by Architect Peter Zumthor What do we mean by that?
  7. 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. 8. A good app is a tool….
  9. 9. … that works well…
  10. 10. … that’s not just part of a set of pieces …
  11. 11. … but pieces tied together carefully to provide for a great experience. We’ve designed and built Magnolia with this goal in mind.
  12. 12. LET’S BUILD A SMALL-BUT-GREAT APP Instead of theory, let’s explore the topic using an example
  13. 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. 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. 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. 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. 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. 18. DESIGN & BUILD!
  19. 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. 20. THE APP & ITS SETTINGS
  21. 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. 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. 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. 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. 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. 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. 27. HOW SHOULD WE CONFIGURE THE FEED? User may select a particular user or tag name
  28. 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. 29. Inform about basic settings. Show and enter license info. Example: „About“ app SMALL APP CONCEPT Show infos and read-only settings.
  30. 30. Tool to verify global settings. Example: „Mail tools“ app SMALL APP CONCEPT
  31. 31. Form for global settings. Example: „Mail tools“ app SMALL APP CONCEPT
  32. 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. 33. MOCKUP Show images of two mockups: - list of photos - settings
  34. 34. MOCKUP Show images of two mockups: - list of photos - settings
  35. 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. 36. ACCESS THE PHOTOS Part 2: get access to the web service
  37. 37. HOW TO ACCESS PHOTOS ON INSTAGRAM? How the heck… No need for hacks any more.
  38. 38. Content apps may access content outside JCR e.g. files on the file system; data in a relational DB; … CONTENT CONNECTORS
  39. 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. 40. TASKS IN PULSE Part 3: handle tasks going to use tasks to handle suggestions
  41. 41. BUT… TASKS IN PULSE??? Don’t worry: 5.3 improves on this a lot
  42. 42. Tasks are listed in a separate tab and display their current status. Tasks are independent from work flow. TASKS IN PULSE
  43. 43. Tasks can be sent to groups and assigned to group members. Tasks are available in CE. TASKS IN PULSE
  44. 44. OK. HOW DO I ADD A TASK? UI to create a new task?
  45. 45. MOCKUP Here’s the vision: A simple dialog for picking the task
  46. 46. A REGULAR DIALOG? A regular dialog feels to heavy for that. It darkens the background, removes the context.
  47. 47. Designed for heavy duty editing with complex fields and forms. REGULAR DIALOGS ARE FOR EDITING We need sth else
  48. 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. 49. Example: „Rename item“ dialog USE LIGHT DIALOGS FOR QUICK INPUT
  50. 50. Example: Chooser dialog (narrow) USE LIGHT DIALOGS FOR QUICK INPUT This actually hasn’t been realized yet.
  51. 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. 52. We’ve updated regular dialogs… REGULAR DIALOGS IN 5.3
  53. 53. … to offer a WIDE settings as well. REGULAR DIALOGS IN 5.3
  54. 54. We’ll use a light dialog for picking the task. USE LIGHT DIALOGS FOR QUICK INPUT !
  55. 55. BUILD Show how task manager is used to create a new task Config tasks / messageViews SubmitPhotoAction
  56. 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. 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. 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. 59. QUESTIONS?
  60. 60. THANK YOU! Photo Credit: https://www.flickr.com/photos/timcaynes/6681394555/ switzerland12 by Tim Caynes

×