Upload
perficient-inc
View
1.803
Download
2
Embed Size (px)
Citation preview
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Look, Feel, TouchCreating Realistic User Experiences
with Interactive Prototypes
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
About Perficient
Perficient is a leading information technology consulting firm serving clients
throughout North America.
We help clients implement business-driven technology solutions that
integrate business processes, improve worker productivity, increase
customer loyalty and create a more agile enterprise to better respond to new
business opportunities.
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Fast Facts
Founded in 1997 Public, NASDAQ: PRFT 16 locations throughout the U.S. & Canada:
– Chicago, Cincinnati, Cleveland, Columbus, Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis, Minneapolis, New Orleans, Philadelphia, San Jose, St. Louis and Toronto
1,100+ employees Dedicated solution practices Served 400+ clients in past 12 months Alliance partnerships with major technology
vendors Multiple vendor/industry technology and growth
awards
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Our Solutions
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Our User Experience Capabilities
Research Design & Validation ImplementationProven user research and analysis techniques enable us to understand users’ goals, attitudes, and behaviors. We prioritize their needs against business and IT goals to define an experience strategy that guides our design decisions.
Based on user input, we define the information structure and develop layered blueprints, from information architecture through interaction and visual design. Our focus on brand integration and usability bring the user experience to life and ensure that it exceeds user expectations.
Development and Engineering teams work closely with Design teams to execute the supporting technical solutions. Perficient uses flexible collaboration models and program lifecycles, tailored to specific engagement type.
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Our Experience in Interactive Prototypes
Lo-Fidelity
Sketching
Mid-Fidelity
Page layout with some interaction
Corp Logo
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Our Experience in Interactive Prototypes
Hi-FidelityRich interactions and visual design concepts
Example from protoshare.com Example from irise.com
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Purpose of Today’s Webinar
Description
• Test requirements with stakeholders before the development begins
• Look, Touch and Feel what will be built before you build it
Look: See how the requirements are fulfilled (lo)
Touch: Click through some key tasks (mid)
Feel: See, Click, Experience (hi)
Test design with real users before or during the development
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Prototyping Maturity
That was then, this is now
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Stakeholder Review
Requirement Solidification
• Define, discuss and visualize requirements
• Confirm users and tasks
• Use prototype to directly engage the business owners
• A visual contract between IT and the business
• Less scope creep
• Reduces late requirements
• Reduces change requests
Consensus Building
• Build consensus of what the product/site needs to do and for whom
• Facilitate collaborative design sessions
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Prototyping Fidelity
Lo
• Paper, ePaper
• Human supplied interaction
• No electronic interaction
Mid
• ePaper with some interactivity
• Key task flow pages are designed and linked
• May look raw or visual brand is fully employed
Hi
• Prototyping Tools
• UI Development tools
• Interaction of key tasks, with complex UI interactions present
• May look almost ready or already built
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Lo-Fidelity
Method• Determine key business objectives, users and tasks
• Sketch pages
Favorite Tools
• Paper: Paper/Pencil, White Out, Post-its
• ePaper: PowerPoint,Visio, Photoshop
Feedback In-person: bring copies and have people mark up the pages
Remote: Scan/email, web host, collaboration tools
Advantages: Low learning curve, small investment, easy to throw away
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Lo-Fidelity Case Study
Lo
• Sketched key tasks with 3 different design patterns
• Iteratively test those concepts with target users to determine the most successful content organization and transactional flow
Corp Logo
Corp Logo
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Mid-Fidelity
Method• Determine key business objectives, users and tasks
• Whiteboard or Sketch some before jumping to electronic
Favorite Tools• Visio with active hyperlinks – easy to share
• Protoshare – affordable monthly subscription
• Axure – some rich interactions
Feedback In-person: Display on projector, make changes on the fly
Remote: Webshares, collaborative design meetings
Advantages: Easy to learn, medium investment, beginning to touch full UX
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Mid-Fidelity Case Study
What We Did Designed page
layout, task flow
Used Visio to prototype flow
Gained requirement consensus
• Proceeded to build a Hi-fidelity prototype in iRise for user feedback
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity
Method• Define business objectives, users, tasks and key features
• Developed interactive prototype to demonstrate the application functionality including movement and behavior
• Leveraged the prototype to define business requirements
Favorite Tools• Photoshop, Fireworks
• Dreamweaver, iRise
• HTML/CSS, Flash Catalyst, Flex
Feedback In-person: Projection, Encourage participants to take a test drive
Remote: Webhost, place in collaborative workspace
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
What We Did Designed a multi-sourced web
application that allowed the user to work with the company as one source for services, rather than traversing multiple systems.
Allowed business to cross sell service offerings
Used iRise to visualize branding, cross SBU core functionality
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
Corp Logo
Corp Logo
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
What We Did Designed an improved
data visualization model
Used Flash Catalyst to prototype core functionality
Integrated a Flex interface with a portal infrastructure
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Hi-Fidelity Case Study
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
High-Level Visual Design
Method• Explore high-level design concepts through Mood Boards
• Conduct visual preference testing
Favorite Tools• Semantic differential survey
• Online survey
Feedback In-person: Sample user completes survey during usability testing
Remote: Survey is posted on-line for users to complete
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
High-Level Visual Design
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
User Feedback
Ah-hah! Moments
• Users can teach you
• Highly interactive prototypes can provide feedback on all elements that impact user experience
• This is even more important as you move to the mobile space.
Design Iterations
• Every great product/system idea needs to be conceived, concepted, chewed up for awhile and THEN built.
• Don’t start building if you should still be chewing.
• Interactive prototyping helps you describe the design in ways a 100 page document never could do.
Talk to us more about mobile another time. We know how to achieve great mobile user experiences.
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Summary
• Test requirements with stakeholders before the development begins
• Look, Touch and Feel what will be built before you build it
Look: See how the requirements are fulfilled (lo)
Touch: Click through some key tasks (mid)
Feel: See, Click, Experience (hi)
Test design with real users before or during the development
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Tool Links
• Visio | Download and Trials Site
• ProtoShare | Video Tutorials
• Axure | Product Tour
• iRise | Usage Scenarios
• Flash Catalyst | Design Projects
• Flex | How it is Being Used
• Photoshop | Creative Impact
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Questions?
Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED
Follow Perficient Online
Facebook.com/Perficient
Perficient.com/SocialMedia Daily unique content about content management, user experience, portals and other enterprise information technology solutions across a variety of industries.
Twitter.com/Perficient