prototype, ui, ux , and risks

Download Prototype, UI,  Ux , and Risks

If you can't read please download the document

Upload: lesa

Post on 25-Feb-2016

67 views

Category:

Documents


0 download

DESCRIPTION

Prototype, UI, Ux , and Risks. Supannika Koolmanojwong CS577. Outline. UI Risks Prototype User Experience Human Interface Guidelines. Types of Prototype. Throwaway prototyping close-ended prototyping, rapid prototyping Informal, paper prototyping, storyboard Evolutionary prototyping - PowerPoint PPT Presentation

TRANSCRIPT

Slide 1

Prototype, UI, Ux, and RisksSupannika Koolmanojwong

CS577

University of Southern CaliforniaCenter for Systems and Software Engineering1OutlineUI RisksPrototypeUser ExperienceHuman Interface Guidelines

@USC CSSE2University of Southern CaliforniaCenter for Systems and Software EngineeringTypes of PrototypeThrowaway prototypingclose-ended prototyping, rapid prototypingInformal, paper prototyping, storyboardEvolutionary prototypingbreadboard prototypingBuild a robust prototype and constantly refine itIncremental prototypingseparate prototypes merged at the endExtreme prototypingHTML pages > fully functional using a simulated services layer > services are implemented3http://en.wikipedia.org/wiki/Software_prototypingUniversity of Southern CaliforniaCenter for Systems and Software EngineeringDimensions of PrototypesHorizontal PrototypeBroad view of an entire system or subsystem, focusing on user interactionConfirmation of user interface requirements and system scopeDemonstration version of the system to obtain buy-in from the businessDevelop preliminary estimates of development time, cost and effort.Vertical PrototypeComplete elaboration of a single subsystem or functionRefinement database designObtain information on data volumes and system interface needs, for network sizing and performance engineeringClarifies complex requirements by drilling down to actual system functionality4http://en.wikipedia.org/wiki/Software_prototypingUniversity of Southern CaliforniaCenter for Systems and Software EngineeringUI RisksNew to client (success criteria): IKIWISINew to client's organization: changes in the way business is done@USC CSSE5University of Southern CaliforniaCenter for Systems and Software EngineeringTop 10 risks20101. Customer-developer-user team cohesion2. Personnel shortfalls3. Architecture complexity; quality tradeoffs4. Budget and schedule constraints5. COTS and other independently evolving systems6. Lack of domain knowledge7. Process Quality Assurance8. Requirements volatility; rapid change9. User interface mismatch10. Requirements mismatch@USC CSSE6University of Southern CaliforniaCenter for Systems and Software EngineeringPrototype in 577abFocus on addressing the highest risk itemsLogin/logout module ?Proof of concepts/algorithmsCheck interoperability between COTS/Services/modulesShow progress to clients, consolidate the idea

@USC CSSE7University of Southern CaliforniaCenter for Systems and Software EngineeringModels Tools to Expose RiskSystem Boundary and Interface ModelBenefits Realization ModelSuccess ModelsModels of Model Clashes ("Model Clash Web")Cost and Schedule Estimates (from COCOMO II)Project, Transition and Support Plans (modeled in MS Project)OCD, SSRD and SSADUML 2.0 Models for client: Activity, State and Use-casefor developers: Class, Core-Capability DrivethruPrototypes@USC CSSE8University of Southern CaliforniaCenter for Systems and Software EngineeringGood GUI prototyping toolsiRiseBalsamiq MockupIPlotz FlairBuilderMockFlowPencil ProjectHot GlooCacoo@USC CSSE9University of Southern CaliforniaCenter for Systems and Software EngineeringPrototypesLow-tech prototypes to explore concepts (not as status assessments)test-drivable prototypesFunctioning prototypesstatus assessment@USC CSSE10University of Southern CaliforniaCenter for Systems and Software EngineeringLow-Tech PrototypesKind: throw away prototypesto explore concepts not as status assessmentsProcessRole play use of prototype in alternative TO-BE work processesStimulate creative discussions with:What would happen if?Had you thought about ?If we did X, what would happen?What are strengths & weaknesses of?@USC CSSE11University of Southern CaliforniaCenter for Systems and Software EngineeringLow-Tech Prototypes

@USC CSSE12University of Southern CaliforniaCenter for Systems and Software EngineeringTest-drivable Prototypes[Functional UI Prototype]Executable Use-cases or State-machinesSimulated Application back-end; tool front endiRiseOther tools?Quasi-functional back-end:Produces "results", but maybe not sensible ones, as front end put through its pacesMocked up website/pages; simplistic serverFunctional (linked, ) website/pages; functional serverPrototype that evolves into system/product?@USC CSSE13University of Southern CaliforniaCenter for Systems and Software EngineeringiRise Test-drivable Prototype Samples@USC CSSE14

University of Southern CaliforniaCenter for Systems and Software EngineeringStatus Assessment PrototypesValuation PrototypeSufficient for Stakeholder CommitmentsDevelopers: clear understanding of software functionalitySystem/Project Requirements Engineer: can full-fill clients operational needsClient: IKIWISI?Foundations Prototype (even if in 577a): Executable ArchitectureDemonstrate that you can integrate all the component typesIncluding COTS/OS, etc.Stubs OK only for some (not all) to be developed capabilitiesDemonstrate that something works: use eValid on integrated Core Capability Drive-through

@USC CSSE15University of Southern CaliforniaCenter for Systems and Software EngineeringOutlineUI RisksPrototypeUser ExperienceHuman Interface Guidelines

@USC CSSE16University of Southern CaliforniaCenter for Systems and Software EngineeringUx User Experience DesignFocus on usabilityNot look-and-feelAttractiveness can be a part of itBenefits for a good user experience designMore customers will be willing to purchaseMore customers will resist doing business with competitorsMore customers will recommend you@USC CSSE17http://www.forrester.com/rb/Research/best_practices_in_user_experience_ux_design/q/id/54101/t/2

University of Southern CaliforniaCenter for Systems and Software EngineeringUser Experience Design Best PracticesBecome your users to know how to design for them.Design first to avoid leaving user experience to chance.Trust no one test to make certain your users are happy.Inject user experience design into your software development life-cycle (SDLC) process.@USC CSSE18University of Southern CaliforniaCenter for Systems and Software EngineeringGreat user experience design@USC CSSE19

University of Southern CaliforniaCenter for Systems and Software Engineering@USC CSSE20

University of Southern CaliforniaCenter for Systems and Software Engineering@USC CSSE21

University of Southern CaliforniaCenter for Systems and Software EngineeringUX 101

22http://dashburst.com/infographic/ux-101-what-is-user-experience/University of Southern CaliforniaCenter for Systems and Software Engineering

23WireframePersonaAcceptance TestUniversity of Southern CaliforniaCenter for Systems and Software EngineeringUX Development Life Cycle

24http://www.slideshare.net/ajkandy/an-introduction-to-ux-design-testingUniversity of Southern CaliforniaCenter for Systems and Software EngineeringAvoid Burdening Users with App-Management TasksUsers view your app differently than you do.As much as possible, restore the users previous stateSupport Auto Save and Versions, if appropriateDecide whether users need to explicitly quit your appAvoid calling attention to file formats

@USC CSSE25University of Southern CaliforniaCenter for Systems and Software EngineeringMac OS X Human Interface GuidelinesUnderstanding of the FundamentalsGreat User Experience that Integrates Mac OS X TechnologiesAttention to DetailGorgeous Graphics and the Right Words Make a Positive Impression@USC CSSE26http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html#//apple_ref/doc/uid/TP30000894-TP6University of Southern CaliforniaCenter for Systems and Software EngineeringUnderstanding of the FundamentalsResolutionOperating systemsGestures, Clicks, and KeystrokesUser Help Is Unobtrusively AvailableMultiple Users Can Use a Single SystemInternationalization

@USC CSSE27University of Southern CaliforniaCenter for Systems and Software EngineeringThe Philosophy of UI Design: Fundamental PrinciplesMetaphorsfile folders for storing documentsUsers already have a mental modelE.g. - Email: to create a new letter, select a recipient, and send the letterFamiliarity - standard user interface elementsSimplicity - streamlined and focused, not have to compete with the details for the users attention.Availability (accessible) Avoid hiding such components too deeplyDiscoverability - providing cues, clickable = aqua color@USC CSSE28University of Southern CaliforniaCenter for Systems and Software EngineeringExplicit and Implied ActionsExplicit actions clearly state the result of manipulating an objectSelect command that is available/activeImplied actions convey the result of an action through visual cues or context.Drag file into trash implies removal@USC CSSE29ConsistencyConsistent to Standard, other versions, other modules, users expectationUniversity of Southern CaliforniaCenter for Systems and Software EngineeringNoun-then-verbusers can see on the screen what theyre doing and that users can point at what they seeUser ControlAllow the user, not the computer, to initiate and control actions.provide users with the capabilities they need while helping them avoid dangerous, irreversible actionsFeedback and CommunicationWhen a user initiates an action, always provide an indication that your application has received the users input and is operating on itWhen minimizes a window, it doesnt just disappear. Instead, it smoothly slips into the Dock, clearly telling the user where to find it again.@USC CSSE30University of Southern CaliforniaCenter for Systems and Software EngineeringWYSIWYG (What You See Is What You Get)no significant differences between what users see onscreen and what they receive in the final outputUse a preview function if necessaryDont hide features by failing to make commands available in a menuAvoid providing access to features only in toolbars or contextual menus. Because toolbars and contextual menus may be hidden, the commands they contain should always be available in menu bar menus as well@USC CSSE31University of Southern CaliforniaCenter for Systems and Software EngineeringForgivenessmaking most actions easily reversible.Perceived Stabilitystandard graphical elementsa clear, finite set of objects and a set of actions to perform on those objectsProviding status and feedback by letting users know that the application is performing the specified task.@USC CSSE32University of Southern CaliforniaCenter for Systems and Software EngineeringAesthetic IntegrityYour product should look pleasant on the screenKeep graphics simple, and use them only when they truly enhance usabilityDont overload windows and dialogs with dozens of icons or buttons. Dont use arbitrary symbols to represent concepts; may confuse or distractAll icons should be rendered at the highest qualityAll text should be anti-aliased, which is automatic when you use the standard system fonts.The font size and type should be consistent within a window The control size should be consistent within a windowfor example, dont mix small and standard controlsAlways use checkboxes for multiple choices, not for mutually exclusive choicesUse push buttons for immediate commands such as OpenAvoid using push buttons to display pop-up menus or serve as tabsAvoid using bevel buttons as tabs

@USC CSSE33University of Southern CaliforniaCenter for Systems and Software EngineeringFocus on Solutions, Not FeaturesAvoid feature cascade. It can be very tempting to add features that arent wholly relevant to the main focus of your app, but doing so can lead to a bloated interface that is slow, complex, and difficult to use. Always ask yourself if a proposed feature directly supports the users goal, and if it doesnt, leave it out.Heed the 80-20 rule. The 80-20 rule states that roughly 80% of users use only a handful of an apps features, while only about 20% of users might use most or all of the features. Thinking of your user audience in this way encourages you to emphasize the features that enable the main task and helps you identify the features that power users are more likely to appreciate.

@USC CSSE34University of Southern CaliforniaCenter for Systems and Software EngineeringMore UX readingshttp://www.forrester.com/rb/Research/best_practices_in_user_experience_ux_design/q/id/54101/t/2http://viget.com/inspire/ux-101-the-wireframe1http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/35University of Southern CaliforniaCenter for Systems and Software EngineeringTeam Prototype PresentationSAL 322OHE 12212:00 12:0714:00 14:07Team 412:10 12:17Team 1614:10 14:17Team 1412:20 12:27Team 314:20 14:27Team 712:30 12:37Team 1114:30 14:37Team 512:40 12:47Team 114:40 14:47Team 1012:50 12:57Team 814:50 14:57Team 1213:00 13:07Team 615:00 15:07Team 1313:10 13:17Team 15University of Southern CaliforniaCenter for Systems and Software EngineeringTeam prototype presentationAssess from your high-priority requirements and risks of your project,pick 2 of the high-priority and high-risk items toprototype20 pointsTime: 7 minutesDate:Friday October 4,12pm - 1:30pmin SAL 3222-3:20pmin OHE 122@USC CSSE37University of Southern CaliforniaCenter for Systems and Software EngineeringTeam Prototype PresentationExpected presentation content:Project overviewRequirementsRisksPick 2 high risk items toprototypeand explain the support rationalePresent 2 features / capabilities/ proof of concepts that youprototypeGrading CriteriaQuality of theprototype(8 points)Quality of the presentation (5 points)Value added to the project (5 points) Appropriateness of the choice of prototyping based on requirement & riskTime management (2)Post your presentation on your team website in the Valuation phase page@USC CSSE38University of Southern CaliforniaCenter for Systems and Software EngineeringPersona39University of Southern CaliforniaCenter for Systems and Software EngineeringPersonaNeed to know exactly who your customers arePersonas provide you with the opportunity to integrate real User Experience all along your product development project.Help product developers and product designers understand how to optimize the product around the ways the user will want to use the productAs detail as possible in all aspects that are related to your systemGenerally 10 persona40University of Southern CaliforniaCenter for Systems and Software EngineeringPersona Development Timeline

University of Southern CaliforniaCenter for Systems and Software EngineeringBenefits of PersonaIt requires a relatively low amount of effort, time, and cost. For example, you could interview internal users or conduct interviews with less than 10 users and create personas within two weeks.Using personas and scenarios increases understanding and stakeholder buy-in.Persona-creation requires fewer specialized skills, in comparison to other approaches.42http://www.uxmatters.com/mt/archives/2010/10/using-personas-during-design-and-documentation.phpUniversity of Southern CaliforniaCenter for Systems and Software EngineeringPersona mappingBrainstorming high-level goalsCreating and decide on key personasTaking personasFleshing out personas: their goals, features, scenarios and behaviors43www.informit.com/articles/article.aspx?p=30099&seqNum=2University of Southern CaliforniaCenter for Systems and Software EngineeringPersona44AreaDescriptionProfileDescribes personal background, history with the company, character traits, or attributes. Give your persona a name, age, and photo to help form a visual image of the persona. Don't get too lost in developing personal profile informationleave that for your next novel!GoalsThese goals can cover personal, life, experience, departmental, and short-term goals. Emphasis should be placed on experience goals when developing a Web solution. The solution's features should aid the persona in achieving these goals.ScenariosThe scenarios are typical situations in which the users may find themselves as they take steps toward their goals. At times, the goals can seem buried in the scenario because they read more like a series of tasks.FeatureThe feature is the general product feature of functionality that can be used by the user in the scenario. These features are very general at this stage of development: A feature such as "data warehouse" is a complete system. Refining these features can come later as the team returns to the personas during early product development.BehaviorThe behaviors are the way the users interact with the features to solve problems. Solving these problems moves them closer toward their goals.University of Southern CaliforniaCenter for Systems and Software Engineering

@USC CSSE45Ref: http://www.youtube.com/show/onlinegamer

University of Southern CaliforniaCenter for Systems and Software Engineering

@USC CSSE46Basic Demographic: Age:Occupation:Hometown:Marital Status:Attributes

Description

User Scenario

Goals & Aspirations

Information Sources

Ref: http://www.youtube.com/show/onlinegamer

University of Southern CaliforniaCenter for Systems and Software EngineeringUser Stories vs PersonaAs a mom, I want to take and share videos of the kids so that I can share important moments with grandparents, aunts, uncles, and friendsUser Stories Left brain, focus on functionalityPersona Right brain, focus on outcomes 47http://www.agilemarketing.net/user-stories-agile-marketing-part-2/University of Southern CaliforniaCenter for Systems and Software EngineeringSoccer mom - Ann48

Basic Demographic: Age: 34Occupation: TeacherHometown: Redmond, WAMarital Status: MarriedAttributesBusyFocused on familySocial OrganizerDescriptionAnn is married to Jeff. They have two kids, Michael age 9 and Nicholas age 7. Twice during the week and every Saturday theyre on the sidelines at soccer games and practices User ScenarioJeff has a camcorder, but has taken limited pictures of the kids. Jeff doesnt get to the weekday practices, and sometimes forgets to charge the camcorder before Saturday games. Ann doesnt know how to use Jeffs camcorder. Jeff cant find the cord to connect the camcorder to the computer, so they watch the videos on the small screen of the camcorder itself. Goals & AspirationsDocument memories as the kids grow upShare important moments with the grandparents, aunts, uncles and friends. Information SourcesFacebook5 minutes for mom websiteLocal paperGreys anatomyhttp://www.agilemarketing.net/user-stories-agile-marketing-part-2/University of Southern CaliforniaCenter for Systems and Software Engineering

49http://www.agilemarketing.net/agile-marketing-user-stories/University of Southern CaliforniaCenter for Systems and Software Engineering

50http://becubed.me/2007/06/08/download-an-example-persona-used-in-the-design-of-a-web-application/http://blog.ocad.ca/wordpress/gdes1b26-fw2010-19/2011/02/18/exercise-eight-ocad-student-personas/

University of Southern CaliforniaCenter for Systems and Software Engineering

51

University of Southern CaliforniaCenter for Systems and Software Engineering

52http://www.dylanux.com/case-study-1.shtml#.URVOcaV9JboUniversity of Southern CaliforniaCenter for Systems and Software Engineering