evolve'15 | maximize | ted billups | taming aem
TRANSCRIPT
1
TAMING AEM
I. User Centered DesignII. Super BriefIII. Tips for Creative in AEMIV. Emerging TrendsV. Summary
Simplifying Design and Creative for Big Brands
TED BILLUPS | 8/17/15
2
Q: How do we get great “creative” results, especially when referring to a big system like AEM?
A: First, it’s critical to start with User Centered Design to meet user, business, creative and technology goals.
UCD gives extensive attention to users at each stage of the design process, and builds consensus.
I. USER CENTERED DESIGN
3
A solid foundation is needed so that creative can flourish.A Super Brief documents assumptions, goals and a lot more, to bring the following areas together for all stakeholders to use:
II. SUPER BRIEF
1. Business and Marketing2. User Experience3. Creative and Messaging4. Technology
4
Why do we combine all these into one Brief?It allows us to define what success looks like across the board, so that:• Users will accomplish their goals more easily, which lead to…• more positive and on-target brand experiences, which lead to...• better business and marketing performance, which allow…• deeper focus on forward-thinking innovation and sync between
systems and teams.
II. SUPER BRIEF
5
1. Do think of design in terms of components. Design a LOT of components. They solve user and/or author needs.
2. Don’t lock down templates unless governance is a big challenge.3. Do create Author Controls to customize and get more creative
mileage out of existing templates.
III. TIPS FOR CREATIVE IN AEM
6
4. Components should follow mental models, aka “Design Patterns". e.g. eCommerce, Editorial/Blogs, Marketing Landing Pages.
5. Transition to Responsive simply at first, then improve and expand.6. Use interactions to improve the experience, build brand equity
and be memorable!
III. TIPS FOR CREATIVE IN AEM
7
Author ControlsAuthors can create unlimited sites based on one or two templates.CSS has really grown up and can do so much now! For example, you can create author-selectable controls for different looks, such as:
• fonts, colors, photos, patterns• graphics (especially vector)• shapes, animations, interactions and more can all be
customized via CSS and a little Javascript.
III. TIPS FOR CREATIVE IN AEM
8
Author Controls
III. TIPS FOR CREATIVE IN AEM
9
Components, Templates and Patterns- MegaMenus and Drawers: great solution for desktop. Very useful
when navigation needs visuals to help users recognize information more quickly à this reduces cognitive overload and friction.
III. TIPS FOR CREATIVE IN AEM
10
visuals
III. TIPS FOR CREATIVE IN AEM
11
Components, Templates and Patterns- Search: Search is very powerful. It deserves the users' entire
attention. A large % of users are site searchers. We recommend you design accordingly.
III. TIPS FOR CREATIVE IN AEM
12
MegaMenus and Drawers
III. TIPS FOR CREATIVE IN AEM
13
asd
III. TIPS FOR CREATIVE IN AEM
14
Components, Templates and Patterns- Leverage the eCommerce experience. Users know how eCommerce
works.- What does this mean? Take the BtoC retail experience, remove the
checkout, and leverage the flows, layouts and components.- Patterns to leverage: Search, Category, List, Detail, filters, Cart (which
can be used as “Save for Later” to jog users’ memory, like we see on Amazon and similar), and many more.
III. TIPS FOR CREATIVE IN AEM
15
eCommerce components
III. TIPS FOR CREATIVE IN AEM
16
Components, Templates and PatternsAllow users to more easily recognize and understand content at a glance:• Use document thumbnails of actual pages that authors can set• Display important metas and functionality on Hovers/Taps• Allow users to view by doc types and languages
III. TIPS FOR CREATIVE IN AEM
17
Components, Templates and Patterns- Previews
III. TIPS FOR CREATIVE IN AEM
18
“Quick” Responsive: Take an existing desktop site and make it responsive with few content changes• do a quick-hit Heuristic review of the existing desktop site to isolate
any big issues.• Mobile First. Design phone and tablet, and work your way back to
the Desktop design to see what works. Otherwise it will be near impossible to make the front-end of desktop and mobile work together.
III. TIPS FOR CREATIVE IN AEM
19
ADA ComplianceADA (Section 508) is possible in AEM, and it can be responsive.• Yes, it can look great! But requires additional layers of front-end
code and lots of browser and device testing, to ensure rendering speeds are not compromised.
• All this means navigation can be operated with a keyboard, and assistive technology can track focus and focus changes.
III. TIPS FOR CREATIVE IN AEM
20
III. TIPS FOR CREATIVE IN AEM
21
Heuristic ReviewA quick way to Identify and prioritize the problems before design begins.
III. TIPS FOR CREATIVE IN AEM
“A heuristic review is a method used to analyze and evaluate an existing application or website against best practices for usability, accessibility, design, and functionality.”
22
Heuristic ReviewUX professionals assign a severity rating to issues in key areas:• Consistency and standards• Flexibility and efficiency of use• Match between system and the real world• Recognition rather than recall• Visibility of System Status• And more…
Major issues can then be prioritized and addressed in design.
III. TIPS FOR CREATIVE IN AEM
23
Interactions!Are more important than ever. Native Apps have paved the way for better interactions, so websites must follow. Buttons, can for example:• show status
III. TIPS FOR CREATIVE IN AEM
>
• or expand into content and functionality such as checkout
>
24
Interactions!SVG• SVG graphics are lightweight and
scale with no loss in quality on any device – responsively
• great for logos! • you can animate SVGs to grab
attention and guide the eye• just be sure to browser and device
test SVGs thoroughly
III. TIPS FOR CREATIVE IN AEM
25
A few AEM creative developments that will get more attention in 2016
1. Evolving Documentation: “Hybrid” Design Pattern Libraries + Styleguides. A natural fit for Component based design.
IV. EMERGING TRENDS
26
2. Emotional Design: go beyond functional and usable. Make your site memorable with a personality. Surprise and delight users, based on Personas. What does this user need and want? How can I use content and interactions to make them smile?
IV. EMERGING TRENDS
27
When building your team, it’s important they:• understand the value of User Centered Design and how to get to it.• Develop the necessary tools to manage creative as it applies to all
members of the team. • Create relevant, meaningful interactions for users• Stay on top of what’s next.
If your team can marshal these skills and apply them intelligently to the AEM project, you stand a good chance of producing a site that fulfills its mission of elevating the brand and satisfying all users and teams.
V. SUMMARY
28
• 1) Draggable Element:• 2-4) Color Extraction• 5) Text Styles Hover Effects.• Creative Gooey Effects:• 6) "Selection”• 7) "Send Loader”• 8) "Share”
MORE INTERACTIONS!
Tooltips:• 9) "Round”• 10) "Line”Article Intro Effects:• 11) "Fixed Side”• 12) Book Preview• 13) Open/Close Menus
29
PATTERNS AND STYLES
30
Ted BillupsExecutive Creative Director
Linkedin.com/tedbillups
Mark KelleySenior Client Manager
[email protected]/markkelley
(919) 368-2748
THANK YOU!
�
�
�
�