Presentation on theme: "1 Notes for User Experience Strategy Discussion Candace Soderston Kuali Rice User Experience Architect 6-30-2011."— Presentation transcript:
1 Notes for User Experience Strategy Discussion Candace Soderston Kuali Rice User Experience Architect 6-30-2011
2 User Experience Strategy (Notes for Discussion) UX Philosophy: Deepen our collective understanding of people Bridge users directly into the design & evaluation process (users = IT Professionals, Application Developers, Business Analysts, Faculty/Staff, Students, etc.) Steward Best Practice: Design tenets, patterns, principles, execution Worthy user problems/goals UX engagement rigor (what users?, what patterns?, when in the process?, how engaged?) UX Goals: Maximize user uptake – immediate reaction and self-discovery / awareness Minimize user disruption – bridge from old to new (revolution is OK, with bridge) Maximize user productivity – known pain points and bottlenecks eliminated, desired new tasks enabled, perception of time to goal (significantly reduced)
3 Continuous Discovery Continuous Envisioning Continuous Developmen t Product Development Experiential Prototypes / Architectures Business Propositions End-to-end scenario definition End-to-end scenario definition Experiential Prototypes / Architectures Business Propositions End-to-end scenario definition End-to-end scenario definition Deep Dive Observational studies -- “Day in the Life of … “ Prioritized tasks / pain points Deep Dive Observational studies -- “Day in the Life of … “ Prioritized tasks / pain points Keylearning Keylearning Example: Integrated User Experience in Software Engineering User focus and cross-disciplinary teamwork, in parallel, concurrently – multiple time horizons (V1 & future): Continuous Design & Definition V1V2V3
4 UX covers multiple “time-horizons” Early UX Engagement – before next release (2.1): Insights gathered on key user tasks before development moves on to future release: User prioritization across key UI/task improvement opportunities User needs / requirements (per identified task domain) Current pain points analysis Defined user scenarios for key tasks Integrated UX Engagement – during release (2.0): Key task opportunities – designing the “how” in current release: UI interaction models, UI Specs, UI widgets Information architecture, navigation, labeling User/Application task flows Storyboard, Wireframes, Prototypes Visual design artifacts Horizon 1 Major Partner: Developers & Technical Architect Horizon 2 Major Partner: Business Analyst & Technical Architect
5 Building a Scalable User Experience Process: End – Release to field Graphic treatment & Refinements to all Information presentation Interactive prototypes Widgets (buttons, inputs) Refinements Information Architecture Application flows & concepts Wireframes, storyboards Defined user scenarios Functionality required to meet business & user needs User task prioritization: User goals, tasks, habits perceptions & context Start -- Business Needs Original model above: Jesse James Garrett, 2000 “Platinum” UX starts @ strategy “Silver” UX starts @ structure “Bronze” UX starts @ skeleton “Basic Health” UX starts @ surface “Gold” UX starts @ scope No UX for some projects (but they can use common design specs & artifacts)
6 Ultimate Objective from early research -- Ultimate Objective from early research -- Understand communities’/users’ priorities
7 Typical UX Activities: Timeline and Methodologies 1. Understand users, their environment, the tasks they perform, and the importance/satisfaction with how those task are currently performed
8 2. Conduct expert user assessment of key tasks on competitor products Typical UX Activities: Timeline and Methodologies
9 3. Create high level mockup of new design and evaluate with users Typical UX Activities: Timeline and Methodologies
10 4. Refine the design, conduct user assessments of prototypes with iterative evaluations and improvements Typical UX Activities: Timeline and Methodologies
11 5. Validate the design with users in the context of defined task scenarios and a ‘real’ environment Typical UX Activities: Timeline and Methodologies
12 6. Compare finished product to competitor product(s) with representative users to verify that usability objectives have been met Typical UX Activities: Timeline and Methodologies
13 Affinity with key future directions (ARC, TRC, Foundation) Need-State of the current UI (or lack of) Relationship with key user pain points Team passion & belief in importance of the area, long- term impact, innovation-coolness, visibility across community AND amount of effort & resources available / time in cycle! Prioritization framework for UX coverage:
14 Getting Creating Designing Creating Managing Managing Managing Started Applications Workflow Rules Organization Identity Notifications Understanding Current Solutions: Likes and Dislikes? Deployment Research and Design Install, Setup, Configure, Migrate, Upgrade, Update KRAD Research and Design KRMS Research and Design KIM Research and Design Personas Great Kuali UX – Great resulting community Uptake! Key User Scenarios UX Scenarios Persona / profiles KEW Research and Design KOM Research and Design UI Specs & Models Wireframes Widgets Prototypes UX across the Landscape for Kuali Rice? KEN Research and Design
15 Determine UX coverage model for 2.1 projects: June 2011 Feb 2012 X X Oct 2011 ----------------------------------------------------- First months: Immersion / bootcamp into Kuali: 1.KRMS tactical UX improvements 2.KRAD Accessibility - research standards / tools, evaluations of 2.0 3.Gap analysis: Define UX research needed for 2.1 Form user groups needed for 2.1 (up to 3 groups, 3 demographics profiles) Review/edit/add new material into Rice User’s Guide? ------------- Top Rice 2.1 UX candidates: KRAD UX (structure, skeleton, surface – arch/design) KEW UX (strategy - research) Getting started (scope) (Import/Export?) ------------------------------------------- Rice 2.0 end & 2.1 Requirements candidates: Prioritize / select key UX task domains for 2.1 and coverage model: Ease of getting started? – none? Creating / assembling apps? (KRAD) - Silver Creating workflow? (KEW) – Platinum (beginning) Creating/editing rules? (KRMS) – none? Managing identity? (KIM) – none? Managing organizations? (KOM) – none? Managing notifications? (KEN – Import/Export) – none?
16 Rice UX – 2.1 work items - in context End – Release to field Graphic treatment & Refinements to all Information presentation Interactive prototypes Widgets (buttons, inputs) Refinements Information Architecture Application flows & concepts Wireframes, storyboards Defined user scenarios Functionality required to meet business & user needs User task prioritization: User goals, tasks, habits perceptions & context Start -- Business Needs Original model above: Jesse James Garrett, 2000 Workflow UI research – user requirements & current tools UI review KRAD 2.1 work
17 Technical Architecture Content Publishing Business Analysis / Planning SW Development User Experience Architecture User-centered, cross-disciplinary Team formation The project manager conveys priorities from ARC & board, coordinates the staffing and plan, schedules and ensures process/intersects, removes obstacles, tracks data to objectives, reviews and makes, approves, and owns decisions (with direction from ARC, TRC, Rice board). The cross-disciplinary team crosses functions and together designs and manages to the objectives / targets, engages with users in feedback/validation exercises, interprets input, turns it into design & architecture decisions -- cross- facets/functions. Items that are controversial and can’t be conclusively decided in the cross-disciplinary teams go to program & executive team with recommendations driven by data (customer / user). Typical skills in user-centered design team: Project Management
18 Typical skills in user-centered design team, cont: Example Team Structure Business Analyst / Market Strategy & Planning ··Segment Definitions and Characteristics expertise ··Identification of Software Solutions and Description of their offerings in feature/function, and task/environment terms ··University requirements/Technology forecasting expertise..Surrogate input for some end user segments Information Developer ··Instructional / training design expertise ··Communication / technical concepts expertise ··Documentation packaging expertise ··Translation expertise ··Online / Hardcopy prototypes Lead Technical Architect ··SW Architecture expertise ··SW Programming expertise ··SW Packaging expertise..SW Prototypes, schematics, & functional models ··Industry/Technology forecasting expertise Software Developer ··SW & UI Programming expertise..SW Prototypes, schematics, & functional models Marketing / Communications ··Advertising and Point-of-Sale materials ··Current customer & channel contact ··Knowledge of competitive situations ··Knowledge of cross-cultural marketing needs ··Impact of design on marketability – expertise ··Communication Support & Service ··Impact of design on service costs – expertise ··History of current field problems ··Current customer contact ··Help desk planning and Design UI interaction models / sequence / steps / obstacles UI designs: hand drawings / storyboards / wireframes / prototypes Visual and Physical Design expertise Color / size / layout / balance / positioning Aesthetics / metaphor / imaging / visual grammar User Experience Architecture, Research User needs / habits / abilities / wants (including special needs audience / accessibility / color-blindness, etc.) User profiles / persona definitions Opportunity maps (most important/frustrating tasks) Use-case scenarios – user task scenario definitions Competitive evaluation - hand-on, user experience
19 In addition to focus on key task domains, there are “horizontal” UX aspects that benefit all tasks / features for UX leadership see next slides
20 Some Horizontal UX Aspects (for strategy discussion ) 1.Common, re-usable UI controls & templates framework -- architecture & library 2.Common persona definitions/understanding across feature teams 1.Accessibility focus for standards compliance & leadership 1.Common Install, Setup, Configuration, Migration, Upgrade, Update - Architectural Framework and Requirements 1.Error message Architecture/framework, message database, action- orientation, language 2.Terminology control – Strategy, Research, Dictionary / Lexicon / Ontology 3.Unifying portal for discovery & launchpoints – populated by Kuali functions that are installed, per individual’s authorization/role?
21 Aspects of UI Development Process Maturity: Common, re-usable UI controls and frameworks Free design space across feature teams No UI guidance or review, no commonality Common UI templates / models Common UI guidelines / objectives UI design process in place Some projects using Some user involvement Mature Immature Common Artifacts Teamwork Aspects No design process formalized – UI task flow & design done while executing No user involvement All key projects using UI design process Users evaluating all key projects (structured methodology, sampling control and non-biasing approach)
22 UI Controls – Example Design Patterns Patterns represent optimal solutions to common interaction design problems within specific contexts. Examples: Data Views (grids, tables, lists) Form edit views & mechanics Property views Status / notifications Breadcrumb/Path Start/Home page portals framework Paginate (‘chunking’) Dashboard Views Wizard framework Monitor Long-Running Ops/Tasks How to Launch Action/Task Multi-select Drag-drop Next/Back Scroll Explore Browse Search Filter Tag
23 Details: Shared UI controls library Envision a UI controls library that all can use: Use of the standard controls expected/required in all Kuali specs. All developers browse the UI controls library first before spec’cing / executing. Awareness promoted Innovation solicited and shared – PMs/Devs across the community who think they can do a better control can submit a prototype to a UI architecture review board for review/evaluation, to get full support: If deemed an improvement, it replaces or adds to the current control and all feature teams inherit the benefit. Otherwise, it goes into a community “sandbox” area for all to see and play with for future ideation, but does not get service/support in the official Kuali set (free ‘open-source-like’ model, alpha code). Wiki/blog content. Library includes complex controls/frameworks, (Wizards, etc.), not just OS-level controls. On the web for all to use. Easy to find through our and other websites. Objective: Users can transfer their learning! Software is UI compatible! Developers can share UI primitives and therefore spend more time on other challenges! See: https://wiki.kuali.org/display/STUDENT/User+Interaction+Model https://wiki.kuali.org/display/STUDENT/User+Interaction+Model (from KS team, W.Washington et.al.) Others: http://fluidproject.org/ http://dojotoolkit.org/widgets Google's widget library Yahoo's widget library
24 Details: Umbrella, goal-based portal? Single Unifying Kuali Application Portal design, inclusive for all users? Enable role separation / authorization / delegation / collaboration Enable customization by institution (granular roles/permissions) Enable customization by users (their own frequently-used function page). Enable users to handle role changes/evolution, collaboration, delegation through their familiar portal
25 Key UX needs? Easy discoverability & navigation Easy discoverability & navigation to features / tasks Adaptive / flexible UI Adaptive / flexible UI - enable role-based, task-based, and team- based workspace UI. Allow all roles to use same UI framework – populate w/ appropriate tasks. Work-flow delegation & authorization Work-flow delegation & authorization model to facilitate separation of duties as well as exception scenarios Action-based management Action-based management ‘only show me what I need to be concerned about’ System and business process metrics System and business process metrics – e.g., notifications on key business indicator thresholds
26 Terminology control? – Strategy, Research, Dictionary / Lexicon / Ontology Point of Contact for formative research and coordination / control of terminology? This work is in the front-end, early UI concept development phase, before improvements are defined and before specs are written. Skills in psycho-linguistics and research methodologies. Liaison with industry-wide standards bodies, universities, other MS divisions’ lexicons. Research techniques: contextual inquiry, card-sorting, concept/affinity mapping, cloze procedures, multiple choice/matching. Consistent & standard terminology simplifies user experience. (Example above from a job posting for SAS)
27 Roles overlap – some tasks are done by multiple “personas” Roles change – tasks done by one persona shift to another Tasks vary in frequency, difficulty, importance -- What do we know?
28 IT Pros & information worker/end users have much in common: Spend most of their electronic time in email, internet and spreadsheets. Are challenged with constant multi-tasking and interruption, and carry their learning from one tool to another. Expect to be able to do all tasks through a GUI. Want to be able to traverse through software in both object/action and action/object sequences, depending on which better fits the immediate goal.
29 There are also differences in IT Pro behavior vs information worker/end users They expect tasks to be “scriptable”. They want better integration across GUIs and command line/scripting capabilities. Example: Do task for the first time through a GUI, then use the underlying script output used by the GUI as a template for subsequent tasks (able to copy/paste & edit)
30 Brainstorming Exercise: What UI and UX aspects are … … most difficult to achieve now in 2.0? … … need UI widget or model for 2.1? … … need additional focus in 2.1? … (See results at https://docs.google.com/a/kuali.org/document/d/1OWWn07CBwxJtFGXYP1 Y4gXBijg5PL61K_fhu75AHAVw/edit?hl=en_US https://docs.google.com/a/kuali.org/document/d/1OWWn07CBwxJtFGXYP1 Y4gXBijg5PL61K_fhu75AHAVw/edit?hl=en_US
31 Appendix for optional viewing … next slides are one example from proprietary software for enterprises (Users = IT Professionals)
32 Before = User experience problems: Object-action only, no task structure Tree depth issues Discoverability issues Screen real estate used poorly After, in Exchange 2007: Start page added to integrate all configuration tasks Tree structure significantly simplified Server roles group functionality/settings Actions pane ‘bubbles up’ tasks Filtering capabilities added Powershell scripting integrated Example from Exchange System Manager work:
33 This is the “AFTER” view: Tree structure significantly simplified Tree structure significantly simplified Console root hub page with tab structure added in the center, don’t have to start with object selection, extensible to other task categories Console root hub page with tab structure added in the center, don’t have to start with object selection, extensible to other task categories Procedural information “post-its” with links enable learning by doing, not just reading Procedural information “post-its” with links enable learning by doing, not just reading Actions pane added on the right, context-sensitive, “bubbles up” tasks relevant to selected objects Actions pane added on the right, context-sensitive, “bubbles up” tasks relevant to selected objects Exchange System Manager example, continued
34 IT Pros can optionally view and copy/paste the underlying script that the GUI executes:
35 Similarly, Wizards display the underlying script in the successful completion message. Can be copied/pasted for future script use:
36 Resulting Action: Task structure applied on top of OO structure – the OO structure persists –users can learn it while using the console page & “Post-its”. The user can view the scripts resulting from doing the tasks, and can copy/paste to create their own scripts. (Similar to web pages/source.) 2 designs iteratively tested & refined. The winning design tested well with users in the lab and in the field. High task success, high post-task satisfaction level. Good press & customer satisfaction. People want to learn by doing not by studying – no time! Task-oriented information on console homepage (root hub) – instead of blank pane. “Post-it” with live procedure links floats on top of UI but can be moved aside & out of the way.