Upload
magnolia-cms
View
233
Download
2
Tags:
Embed Size (px)
DESCRIPTION
A great app empowers users by being both meaningful and supportive of their daily work. A great app consists of a narrow set of powerful and easy-to-undersatnd functions. Andreas and Mikael, Magnolia International, will show you how new app features in Magnolia 5.3 make your apps more powerful and also present you new app design guidelines to help you create consistent and intuitive apps.
Citation preview
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
MIKAËL GELJIC PROFICIENT CODER PASSIONATE ABOUT THE USER INTERFACE
´
®
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
GREAT APPS ?
Photo: Therme Vals by Architect Peter Zumthor
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
LET’S BUILD A SMALL-BUT-GREAT APP
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
KONIGI
WHAT DO WE NEED?
Photo Credit:
https://www.flickr.com/photos/magdalenaroeseler/14045150739by Magdalena RoeselerUntitled
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
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
DESIGN & BUILD!
1. The app and its settings 2. Access photos on Instagram 3. Handle tasks in Pulse
DESIGN & BUILD!
THE APP & ITS SETTINGS
WHAT TYPE OF APP SHOULD WE BUILD?
APP DESIGN GUIDELINESQuick-bite recipe cards-style best practicesto ensure your apps look / work / play well.
Available as part of our online documentation https://wiki.magnolia-cms.com/x/CAFcAw
APP DESIGN GUIDELINES
CHOOSE THE RIGHT APP TYPE Content apps - great for managing custom data sets Custom apps - if you need something really different
Content apps - great for managing custom data sets Custom apps - if you need something really different
CHOOSE THE RIGHT APP TYPE
Content app - quick, no need for more, benefit from pre-built functions
CHOOSE THE RIGHT APP TYPE
HOW SHOULD WE CONFIGURE THE FEED?
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
Inform about basic settings. Show and enter license info. Example: „About“ app
SMALL APP CONCEPT
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
MOCKUP
MOCKUP
BUILD
ACCESS THE PHOTOS
HOW TO ACCESS PHOTOS ON INSTAGRAM?
Content apps may access content outside JCR e.g. files on the file system; data in a relational DB; …
CONTENT CONNECTORS
BUILD
TASKS IN PULSE
BUT… TASKS IN PULSE???
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?
MOCKUP
A REGULAR DIALOG?
Designed for heavy duty editing with complex fields and forms.REGULAR DIALOGS ARE FOR EDITING
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
Example: „Rename item“ dialogUSE LIGHT DIALOGS FOR QUICK INPUT
Example: Chooser dialog (narrow)USE LIGHT DIALOGS FOR QUICK INPUT
Example: Chooser dialog (wide)USE LIGHT DIALOGS FOR QUICK INPUT
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
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
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
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
QUESTIONS?
THANK YOU!
Photo Credit:
https://www.flickr.com/photos/timcaynes/6681394555/
switzerland12by Tim Caynes