View
214
Download
0
Category
Preview:
Citation preview
MIS5109Summer2017
UserExperienceDesignLearnathon4:
Structure:TOPICSL1.INTRO:MIS5102ANDMIS5109
M1.IntrotoJus8nmind:SetUpL2.ANINTRODUCTIONTOUSEREXPERIENCE
M2.MemorialDayHolidayL3.USERRESEARCH:Understandinguserneedsandbehaviors
M3.IntrotoJus8nmind:GeHngstartedL4.PRINCIPLESOFUXDESIGN+PROTOTYPING
M4.IntrotoJus8nmind:AdvancedVisualsL5.ITERATIVEUXDESIGN/PROTOTYPING/TESTING
M5.IntrotoJus8nmind:PrototypingwithLogicL6.ASSESSINGPROTOTYPESANDTESTING
M6.IntrotoJus8nmind:Troubleshoo8ngL7.FinalProjectPresentaNons
Agenda:DesignPrinciplesforWebandMobileStoryboardingLow,MediumandHighFidelityPrototypingPaperWireframesAmodDange,BusinessSystemsManagerforUXFacebookEnterpriseEngineeringBreakout/Reviewpar8cipa8onassignments
LEARNITASSIGNMENT#1DUE.AnalyzetheUserExperienceandInterfaceofWebexBreakoutSessions:Ini8ateaBreakoutsessioninWebex.Schedulethesession,invitepar8cipants,runthesessionandterminateit.Usingscreenshots,carefullydocumentyouranalysisofthestrengthsandweaknessesoftheWebexBreakoutinterface.BaseyouranalysisontheprinciplesofInterfaceDesignandtheHeuris8csoutlinedinthereadingsfor6/15.CreateaprototypeinJusNnmind,(Powerpointoranotherapprovedso\ware),toimprovetheinterface
ASSIGNMENTBUCKET1:t6/20@11:59pm Howdidthisgo?Howdidthisgo?
Successes?Challenges?
What is Prototyping
?
A Prototype is “a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly” From Wireframes&Prototypes:IsThereReallyaDifference?hap://community.protoshare.com/2010/12/wireframes-prototypes-is-there-really-a-difference/
WHYisthisimportant?
A prototype can tell a story of use
What is a Wireframe
?
“A Wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work. One of the main purposes of a wireframe is to show you where each item should be placed on a page.” From Wireframes&Prototypes:IsThereReallyaDifference?hap://community.protoshare.com/2010/12/wireframes-prototypes-is-there-really-a-difference/
WHYisthisimportant?Howdoesitdifferfromaprototype?
From hap://www.comentum.com/images/wireframes-sample/ecommerce/home.png
Wireframe
From hap://blog.mockupbuilder.com/wp-content/uploads/2013/06/Thanx-loca8ons-wireframes.png
AnnotatedWireframe
What is the VALUE of a Wireframe
?
?How does Justinmind differ from a Wireframe
What are examples of Low Fidelity Prototypes
?
What is a storyboard
?
Take a 10 min BREAK
AdertheBreak,IwillassignyouintogroupstodiscussyourJourneyMapassignments.
GuestSpeakerAmodDange,BusinessSystemsManagerforUXFacebookEnterpriseEngineeringWhatdoyouwanttolearnfromAmod?
Take a 5 min BREAK
AdertheBreak,IwillassignyouintogroupstodiscussyourJourneyMapassignments.
Postanexampleofanapporwebsite(screenshot)illustraNngastrengthorweaknessregardingdesignprinciplesreferencedinthereadings
Session 4.1: Participation ASSIGNMENT #3
Whatdidyoufind?
Breakout: UX DesignIngroups,compareyourscreenshotsanddiscusshowtheyreflecteithergoodorbadprac8cesforUXdesign.:1. Whatrules/conceptsaredisplayedbytheexample?2. Doestheexamplereflectasuccessorfailureoftherule/
concept?Why3. Howwouldyouimproveit?
?Who will SHARE an EXAMPLE
of UX Design rules/concepts
GuestSpeaker:6/28BrianLynn,DirectorofUserExperienceDesign,LiquidHubWhatdoyouwanttolearnfromBrian?
Recommended