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

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