advisor designvs dev
Post on 23-Jan-2015
435 Views
Preview:
DESCRIPTION
TRANSCRIPT
Advisor.com
Lotus Notes 8:The Designer vs. the Developer
Mary Beth Raven (the designer)Jeffrey N Eisen (the developer)
Keynote
Advisor.com
Who are we?
Mary Beth RavenLead designer for Notes
Jeff EisenChief Architect for Notes
Advisor.com
Overview of this Talk
Why “Dev Vs Design” A bit of the inside story/details Some design and development rationales
Demos and examples peppered throughout
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
Review of the Notes 8 Mission
Become a complete rich-client collaboration platform by
Creating a world-class user experience for Mail. Calendar, Contacts
Adding new capabilities such as activity management and composite applications
Integrating IBM productivity tools (now called Lotus Symphony)
This was a public declaration at Deutsche Notes user group
Expectations are high
Advisor.com
Notes Provides Collaboration Software in a Rich Client
Rich Clients
Web Clients, PortalsMobile Clients
Collaboration
Lotus Notes
And now…a quick tour of Notes 8 before I tell you the story behind it…
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
Working Together, but Working Apart
Design focuses on Design ethnography: Visit customers on site Interview them to find out what they do and know Create user profiles and personae Involve users more during the design, starting
with several studies for a new visual style Dev says…
Great, As long as you organize most of this And you never make us spell “design ethnography”
Advisor.com
Designing the New Visual Style Create a visual system Consistently apply it across the product Design Process
Research: What brand attributes do we want the new visual style to convey
Studies with users Refine the style
Advisor.com
Visual Style Research: Brand Attributes to Convey
Simple
Modern
Fresh
People-oriented
Business-oriented
InnovativeFamiliarReliable
Agile
Advisor.com
Visual Style: Study One Purpose: Determine palette, textures, shapes Method: Surveys of the target users Created five “Image Boards” cutting out magazine
images that reflected the attributes we wanted to convey
Advisor.com
Visual Style: Study One (p. 2) Surveyed all five user groups for their responses Answered questions for each attribute on each
board:How well does this board represent [IBM attribute] They were asked to point to specific images and to describe what conveyed that concept.
Advisor.com
Visual Style: Analysis of Study One Analyzed the boards for
Color Palette Textures Shapes
Advisor.com
Visual Style: Study Two Purpose: Apply the palette and design tone
choices to wireframes of the UI to determine a favorite
Method: Web survey asked respondents to look at 10 user interface wireframes and answer questions about them, indicating their preferences and reasons
Advisor.com
Design said… Here’s our new visual look
Nice dark gradient from menu bar to
tabs
Cool way to show selection
Cleaner look without toolbars
Advisor.com
Dev said…
We love it! Except the part about no toolbars… ARE YOU
CRAZY?? And…. it has too many custom controls
It will take too long to build It will undermine our approach of leveraging
Eclipse to look native on each platform– Windows XP, Vista, Linux, and Mac
Advisor.com
Visual Style Compromises Plain menu bar
Put back the toolbar
Uncool selection in navigator
Advisor.com
Learnings from Working Together but Apart
Yes, design spent time and effort coming up with a design that could not be entirely built in the time allowed
BUT IBM and the design team had to prove to the
world that IBM values design and can do it
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
Differences in Approach…
Hey! When Notes crashes, let’s change it to
say:“Congratulations
You Found a Bug!”
Hey! When Notes crashes, let’s change it to
say:“Congratulations
You Found a Bug!”
Great Idea! Great Idea!
Notes Developer
Notes Developer
Advisor.com
These people are not the target user for this release
(but they are very hard working and smart)
Advisor.com
Design Applies the Persona Approach Created 3 design personae
You are NOT ALLOWED to say “the user,” you must mention the persona by name
All of our prototypes and usability tests are from their perspectives
All specs must refer to them by name
Samantha
Ted Betty
Advisor.com
Dev Thinks…
These designers are COMPLETELY NUTS Anonymous developers proceed to deface
Samantha
Advisor.com
Examples of Early Divergent Approaches
Attention to detail in the visual style Navigator/Outline view Business cards
Advisor.com
(Lack of) Attention to Detail
Spec called for rounded edges
Advisor.com
Better Attention to Detail
Advisor.com
The Navigator/Outline View
To save space, incorporate the + and – sign into the folder
Advisor.com
Business Cards
Early builds did not match designs
Advisor.com
Why the Divergent Approaches?
Dev got used to thinking from the point of view of the code
Not sure how much to trust Design
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
The Watershed Events
A Bad customer briefing Design manager resigns Third party design consultant brought in
Advisor.com
Jeff’s Very Bad, Terrible, Rotten, No-good Day
A Very Large Customer (VLC) attends briefing and sees demos of actual build.
Unimpressed Wants to know why the actual build does not look
more like the pictures they’ve seen Upper management promises that they’ll get
better We send weekly screenshots to customer so they
can verify that they are getting better
Advisor.com
Example
No attention to detail in Sidebar --each panel has different size icons
Advisor.com
Mary Beth’s Very Bad, Terrible, Rotten, No-good Day
My manager resigned He cannot see how Notes 8 can be successful Submitted a list of “issues that broke the Camel’s
back”
Advisor.com
Some of the Issues
“Memo” to “Message” Repeating meeting “just this instance” default Feed reader Float/dock the Open list Workspace re-design The first four were re-added!
Advisor.com
Third Party Design Consultant
Development brought in a 3rd party design consultant to review the designs and the actual builds
Basic finding is that both are in the “right direction” but actual builds have a UI that is “sloppy”
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
Better Collaboration
Dev sees that they should put more trust in the designs
Design agrees to try to work harder within the technical limitations
“Swat” team formed for Mail Dev addresses Platform issues (due to Lotus
Expeditor) with attention to detail Added a designer to Composite Applications
Advisor.com
Inbox
Goals: Use real estate more wisely, help users manage mail more quickly using “whole thread” operations
Early designs wasted too much space on the left
Advisor.com
Inbox
Other designs had too much space between the sender and subject
Advisor.com
Inbox Notes 8 Design
Chose to “re-use” one column for Follow-up flags Replied to Forwarded
Put a light gray gradient behind message type for a consistent left margin
Advisor.com
Platform issues due to Lotus Expeditor
Expeditor provides: Title bar Menu bar “Open List” Tab management Toolbar, including
Search Sidebar
Thin Open Closed
Status bar Visual theme
Advisor.com
Platform: Because Notes 8 is a big plug-in to Expeditor…
Several things that were in Notes 7 had to be re-implemented in Expeditor
Several things did not get re-implemented in time
The option to open a view in a new window Large icons in the “Open list”
Some things on the status bar were left off on purpose
Advisor.com
Platform: Simplify the Status Bar
Remove Editing choices Remove “quick picks” on lower right (we are
putting “send and receive mail in the new tools menu)
Advisor.com
Platform: Dev Says…
We are worried…some users will see that as a “regression”
But since you tell us that all the functionality is available elsewhere in the UI, OK
…when it’s too late for 8.0… DOH! “Receive only” is Not elsewhere in the UI. We have a regression.
Design is mortified and will try to rectify ASAP
Advisor.com
Platform: Make the menu bar “more standard” Add a “Tools” menu, move items from “File” to
“Tools” Change “Database” to “Application” Make the Window menu visible all the time Give Administrators complete control over the
customization of ALL menus and menu items, via user policy
Advisor.com
Dev says…
Complete control of all menus is a great idea… but too much to fit into Notes 8
How about “Advanced Menus” instead?
Advisor.com
Design Says… The new “open List” replaces the
bookmark bar. Leverage same mental model
as “Start button” Contents are the same order
as your Notes 7 bookmark bar. Rename Databases to
Applications Put New things at the bottom Allow Users to close the Home
page, but also get it back Let users tear off and float and
“Folder” and then dock it in the toolbar if they wan
Advisor.com
Dev Says…
Tearing off parts of the open list means changes to the TOOLBAR control (because that is what we used to build the open list)
How about an option to “dock” the open list instead?
Advisor.com
Added a Designer to Composite Applications
Composite Apps aggregate components at the glass — think Rich-Client mash up
Advisor.com
How Do You Build a Composite Application?
Decide which applications will make people more productive if they are all on one screen, then:
Build components Assemble components (you can use our new
“composite application editor”) Deploy the composite application
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
The Happy Ending: Notes 8 Ships!
Positive reviews Dev and Design want to refine their process Domino Server team says “Hey, we want to do
some of this user-centered stuff too!” Two Domino Admin personas are born
Advisor.com
What We’ll Cover …
Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”
Advisor.com
Themes and Features in Notes 8.0.1
Customer driven deployment blockers Stability/Bug Fixes Performance Small set of features from 7.x missing from 8.0
Citrix support Dual timezones …
Small set of new features Quickr integration into sidebar (delivered as add-
on to 8.0.1) Mail file quota gauge Blog template improvements Typeahead in docked open list Domino Web Access over low bandwidth – “DWA
Lite” (Sparkle) Facelift for To-dos
Advisor.com
Quickr Sidebar: Starting Sidebar Panel
When there are no places added to Quickr connectors, a message displays with some information about Quickr and links to add places and learn more.
When there are no places added to Quickr connectors, a message displays with some information about Quickr and links to add places and learn more.
Opens Quickr’s Add Places wizard.Opens Quickr’s Add Places wizard.
Opens Lotus Quickr Connectors Information Center.
Opens Lotus Quickr Connectors Information Center.
Advisor.com
Advisor.com
Advisor.com
Advisor.com
Advisor.com
Advisor.com
Blog Views
Advisor.com
Typeahead in Docked Open List
Advisor.com
Sparkle (DWA Lite)
Optimized for low-speed connections Temporary use: traveling business users Daily user: employees consistently connecting
over low speed Simplified mail: low usage profile
Advisor.com
Themes and Feature Areas for Notes 8.5
Themes Betty has more robust meeting workflow Samantha has more integration at the screen Ted has unencumbered mobility
Feature Areas Mac Support More Symphony integration Rich text editor Mail – especially archiving Calendar – Ical support Contacts Task Management (ToDos, Follow-ups, Activities) Additional Quickr integration
Advisor.com
CAVEAT
NONE of the Notes 8.5 plans is final, NOTHING in these next few slides is a guarantee
Advisor.com
Not just ON a Mac, LIKE a Mac…
Advisor.com
Rich Text Editor
Improvements to table editing (drag and drop to resize columns)
“Auto recognizer” support
Advisor.com
Ted Can Have Color-Coded iCal Subscriptions
Advisor.com
Notes 8.5 Feature Areas
We have more ideas – NOTHING IS FINAL YET! Come talk to me during this conference Watch--and respond to --the design blog-
MaryBethRaven.com
Advisor.com
Wrap-up Resources Notes Design Blog
www-03.ibm.com/developerworks/blogs/page/marybeth Sametime Design Blog
www-03.ibm.com/developerworks/blogs/page/josefscherpa
Domino Blog www.dominoblog.com/dominoblog/dblog.nsf
Lotus Expeditor Information www-142.ibm.com/software/sw-lotus/products/
product1.nsf/ wdocs/expeditor Activity-Centric Computing
www-306.ibm.com/software/swnews/swnews.nsf/n/nhan6nsn8n?OpenDocument&Site=lotus
Advisor.com
Summary of Highlights
IBM has completely updated Mail, Calendar and Contacts
IBM has provided a complete integration client with Notes and the inclusion of
Sametime Activities Symphony Word Processor Symphony Presentations Symphony Spreadsheet Composite Applications
New level of collaboration between design, dev and customers will result in a better experience for YOU.
Advisor.com
ADVISOR SUMMIT Web Update Page
advisor.com/cte0710p.nsf/w/cte0710ud
This session WILL / WILL NOThave updates.
Advisor.com
Thank you!
Please remember to fill out your evaluation.
top related