how to design and build great apps (with moderator notes)
DESCRIPTION
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=hs4u5XNFi2gTRANSCRIPT
GREAT APPS
HOW TO DESIGN AND BUILD
MCONF 2014 - ANDREAS WEDER & MIKAËL GELJIC
with 5.3https://www.flickr.com/photos/diegojack/7715969896/
Photo Credit: Le Lavaux, de l’est à l’ouestby Jacques (diegojack)
ANDREAS WEDER DESIGNER AT HEART ENGINEER BY TRAINING
love to build worlds love to merge design (>10 yrs) & engineering (14yrs)
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
®
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)
IN THIS TALKHow 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
GREAT APPS ?
Photo: Therme Vals by Architect Peter Zumthor
What do we mean by that?
A GREAT APPbrings value to users plays well with other apps
integrates well visually integrates well from a functional perspective
is easy to understand and use
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 in mind.
LET’S BUILD A SMALL-BUT-GREAT APP
Instead of theory, let’s explore the topic using an example
PHOTO SCOUT APPphotos 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
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
WHAT DO WE NEED?
Photo Credit:
https://www.flickr.com/photos/magdalenaroeseler/14045150739by Magdalena RoeselerUntitled
What do we need to get going? To build this with Magnolia?
WE NEEDan 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/14045150739by Magdalena RoeselerUntitled
That’s a bit much to cover in all detail, but…
WE NEEDan 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/14045150739by Magdalena RoeselerUntitled
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
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 this in three steps or iterations
THE APP & ITS SETTINGS
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“)
APP DESIGN GUIDELINESQuick-bite recipe cards-style best practicesto ensure your apps look / work / play well.
You got 10 of them in the conf wallet
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
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
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“)
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
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 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.
Inform about basic settings. Show and enter license info. Example: „About“ app
SMALL APP CONCEPT
Show infos and read-only settings.
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 • emphasize SmallAppLayout, reuse of FormBuilder, action executor...
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 do we leverage from the content app framework
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 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
Example: „Rename item“ dialogUSE 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 continue editing. More complex (with tabs), but still a single, focused task: you pick an asset.
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 APPan 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.
YOU’VE SEENSome 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
YOU’VE SEENMeasures 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
QUESTIONS?
THANK YOU!
Photo Credit:
https://www.flickr.com/photos/timcaynes/6681394555/
switzerland12by Tim Caynes