mis 5109 summer 2017 user experience...
TRANSCRIPT
![Page 1: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/1.jpg)
MIS5109Summer2017
UserExperienceDesignLearnathon4:
![Page 2: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/2.jpg)
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
![Page 3: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/3.jpg)
Agenda:DesignPrinciplesforWebandMobileStoryboardingLow,MediumandHighFidelityPrototypingPaperWireframesAmodDange,BusinessSystemsManagerforUXFacebookEnterpriseEngineeringBreakout/Reviewpar8cipa8onassignments
![Page 4: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/4.jpg)
LEARNITASSIGNMENT#1DUE.AnalyzetheUserExperienceandInterfaceofWebexBreakoutSessions:Ini8ateaBreakoutsessioninWebex.Schedulethesession,invitepar8cipants,runthesessionandterminateit.Usingscreenshots,carefullydocumentyouranalysisofthestrengthsandweaknessesoftheWebexBreakoutinterface.BaseyouranalysisontheprinciplesofInterfaceDesignandtheHeuris8csoutlinedinthereadingsfor6/15.CreateaprototypeinJusNnmind,(Powerpointoranotherapprovedso\ware),toimprovetheinterface
ASSIGNMENTBUCKET1:t6/20@11:59pm Howdidthisgo?Howdidthisgo?
Successes?Challenges?
![Page 5: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/5.jpg)
What is Prototyping
?
![Page 6: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/6.jpg)
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?
![Page 7: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/7.jpg)
A prototype can tell a story of use
![Page 8: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/8.jpg)
What is a Wireframe
?
![Page 9: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/9.jpg)
“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?
![Page 10: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/10.jpg)
From hap://www.comentum.com/images/wireframes-sample/ecommerce/home.png
Wireframe
![Page 11: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/11.jpg)
From hap://blog.mockupbuilder.com/wp-content/uploads/2013/06/Thanx-loca8ons-wireframes.png
AnnotatedWireframe
![Page 12: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/12.jpg)
What is the VALUE of a Wireframe
?
![Page 13: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/13.jpg)
?How does Justinmind differ from a Wireframe
![Page 14: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/14.jpg)
What are examples of Low Fidelity Prototypes
?
![Page 15: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/15.jpg)
What is a storyboard
?
![Page 16: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/16.jpg)
![Page 17: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/17.jpg)
Take a 10 min BREAK
AdertheBreak,IwillassignyouintogroupstodiscussyourJourneyMapassignments.
![Page 18: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/18.jpg)
GuestSpeakerAmodDange,BusinessSystemsManagerforUXFacebookEnterpriseEngineeringWhatdoyouwanttolearnfromAmod?
![Page 19: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/19.jpg)
Take a 5 min BREAK
AdertheBreak,IwillassignyouintogroupstodiscussyourJourneyMapassignments.
![Page 20: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/20.jpg)
Postanexampleofanapporwebsite(screenshot)illustraNngastrengthorweaknessregardingdesignprinciplesreferencedinthereadings
Session 4.1: Participation ASSIGNMENT #3
Whatdidyoufind?
![Page 21: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/21.jpg)
Breakout: UX DesignIngroups,compareyourscreenshotsanddiscusshowtheyreflecteithergoodorbadprac8cesforUXdesign.:1. Whatrules/conceptsaredisplayedbytheexample?2. Doestheexamplereflectasuccessorfailureoftherule/
concept?Why3. Howwouldyouimproveit?
![Page 22: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/22.jpg)
?Who will SHARE an EXAMPLE
of UX Design rules/concepts
![Page 23: MIS 5109 Summer 2017 User Experience Designdigitalmarketing.temple.edu/summer2017shared/wp-content/uploads/... · M3. Intro to Jusnmind : ... , Business Systems Manager for UX](https://reader031.vdocument.in/reader031/viewer/2022030413/5a9ed2127f8b9a67178be9b4/html5/thumbnails/23.jpg)
GuestSpeaker:6/28BrianLynn,DirectorofUserExperienceDesign,LiquidHubWhatdoyouwanttolearnfromBrian?