how to design and build great apps

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