Embed Size (px)
Citation preview
Monday | November 28, 20163:30 pm – 5:00 pm
Nicole Pullin | Bursting Silver
Web Design with the User in Mind
User Experience Consultant Bursting Silver
PROJECT MANAGERQA CONSULTANT
TRAINERFRONT-END DEVELOPERINTERACTION DESIGNER
GRAPHIC DESIGNERBUSINESS ANALYSTUX PRACTICE LEAD
1996 8 roles
17 years
CONSULTING EXPERIENCEFIRST WEBSITE
Passionate about creating positive experiences for people using technology.
3facts
BOOK LOVERDOG OWNER
MOVIE POSTER COLLECTOR
burstingsilver.com
iMIS Implementation!
Custom Development"
Upgrade Planning & Execution
#
Web Design$
Systems Integration
Professional ProjectManagement
%
On-Going Support?
Mobile Apps
Process Optimization&
ASI Chairman’s Circle WinnerPresident’s Club WinnerAI Consultant of the Year
We are digital creatorspassionate about
building beautiful iMISwebsites and cloud applications
Top-notch iMISconsultants withindustry-specific
experience.
AwardWinning Innovative Experienced
Want your site visitors to fall in love with your organization?Fall in love with your visitors.
UXVISITORS NEEDS
BUSINESS GOALSUX
UX
Usable
Useful
Desirable
AccessibleCredible
Findable
Valuable
https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience
Research
DesignTest
Evolve
Build
Research
WHOAre your visitors?
WHYAre they visiting your website?
WHATAre they trying to achieve?
WHEREAre they accessing your website?
WHENAre they accessing your website?
HOWDoes your product/service fit the context of their life?
DIRECT
INDIRECT
SELF-REPORTED OBSERVED
Colle
ctio
n M
etho
d
Participant Involvement
Observations
Task / Activity analysisFocus groups
Surveys
Search logsWebsite statistics
Customer feedbackHelp deskCall centre
Diaries / Journals
Card sorting
Interviews
Source: Donna Spencer http://maadmob.com.au/
Research Methods
DIRECT
INDIRECT
SELF-REPORTED OBSERVED
Colle
ctio
n M
etho
d
Participant Involvement
Observations
Task / Activity analysisFocus groups
Surveys
Search logsWebsite statistics
Customer feedbackHelp deskCall centre
Diaries / Journals
Card sorting
Interviews
Source: Donna Spencer http://maadmob.com.au/
Research Methods
Types of questionsTasks Can you show me how you would make a pizza?
Participation Can you show me how I should make a pizza?
Demonstration Show us how to make a pizza.
Role-playing You’ll be the customer and I’ll be the chef; show me how they should respond.
Sequence Walk me through a typical day.
Specific example How did you make the Chicago pizza?
Peer Comparison Do other chefs do it that way?
Project ahead What do you think it will be like in 5 years?
Look back How are things different than they were last year?
Quantity How many chefs are like that?
Exhaustive List What are all the things you use when you make a pizza?
Other viewpoint comparison What’s your bosses’ opinion on the same topic?
Source: Deep Dive Interviewing Secrets: Making sure you don’t leave key information behind, Jan 2010
Personas
ü BACKGROUND
ü CHARACTERISTICS
ü ACTIVITIES / MOTIVATIONS
ü ENGAGEMENT
ScenariosWHY• Help us think about the use of
the website in unique contexts • Expose problems and
opportunities• Evaluate the website from
multiple perspectives
BUILD SCENARIOS1. What triggers the
experience?2. What happens during the
experience?a) What activities / tasks
are accomplished?3. What is the outcome?
Research Tools
Google Analyticshttps://www.google.ca/analytics/analytics
Survey Monkeyhttps://www.surveymonkey.com
Xtensio Persona Creatorhttps://xtensio.com/user-persona/
DesignWireframes, navigation, interactions, graphics
Interaction Design
Design is content with intent.Content without intent is noise.Intent without content is decoration.- JOE SPRANO
Brand personality exercise
1. Gather the key stakeholders in a room2. Take 2 minutes and write down the adjectives that describe their
organization3. Align common adjectives with a brand personality
SINCERITY
• Down-to-earth• Family Oriented• Honest• Real• Wholesome• Cheerful• Sentimental• Friendly
ExcitementEXCITEMENT
• Daring• Trendy• Exciting• Spirited• Imaginative• Unique• Up-to-date• Independent• Contemporary
COMPETENECE
• Reliable• Hard-working• Secure• Intelligent• Technical• Corporate• Successful• Leader• Confident
SOPHISTICATION
• Upper-class• Glamorous• Good looking• Charming• Feminine• Smooth
RUGGEDNESS
• Outdoorsy• Masculine• Western• Tough
Dimensions of Brand Personality by Jennifer L. Aakerhttp://www.jstor.org/stable/3151897?seq=1#fndtn-page_thumbnails_tab_contents
Remember your audience
Source: http://www.paznow.com/ucd/
Design
• Generate ideas• Confirm features• Draft navigation• Understand content• Create wireframes• Create visual design
Mobile first
WHERE WE USE OUR PHONES99% at home82% in car or transit69% at work53% waiting in line50% walking
Brand Design
Color Typography
Imagery Copywriting
TRANQUILITYSECURITYINTEGRITYPEACELOYALTYTRUSTINTELLIGENCE---COLDNESSFEAR
SPIRITUALHEALINGPROTECTIONSOPHISTICATED---ENVY
FRESHNESSENVIRONMENTNEWMONEYFERTILITYHEALINGEARTH---ENVYJEALOUSYGUILTY
BRIGHTSUNNYENERGETICWARMHAPPYPERKYJOYINTELLECT---IRRESPONSIBLEUNSTABLE
ROYALTYNOBILITYSPIRITUALITYLUXURYAMBITIONWEALTHCREATIVE---MYSTERYMOODINESS
HEALTHYHAPPYFEMININESWEETCOMPASSIONPLAYFUL---WEAKIMMATURITY
LOVEPASSIONENERGYPOWERSTRENGTHHEATDESIRE---ANGERDANGERWARNING
COURAGECONFIDENCEFRIENDLINESSSUCCESS---IGNORANCESLUGGISHNESS
FRIENDLYEARTHOUTDOORSLONGEVITYCONSERVATIVE---DOGMATIC
DEPENDABLEFLEXIBLECRISPCONSERVATIVE---DULLBORING
WEALTHWISDOMPROSPERITYVALUABLETRADTIONAL---EGOTISTICALSELF-RIGHTEOUS
GLAMOROUSHIGH TECHGRACEFULSLEEKBALANCE---INDECISIVEDULLNON-COMMITTAL
SECURITYRELIABILITYINTELLIGENCESOLID---GLOOMYSADCONSERVATIVE
PROTECTIONELEGANCEDRAMATICCLASSYFORMALITY---DEATHEVILMYSTERY
GOODNESSINNOCENCEPURITYFRESHEASYCLEAN---ISOLATIONEMPTINESS
Source: http://coschedule.com/blog/color-psychology-marketing/
Adobe Color https://color.adobe.com/
TYPOGRAPHYhttps://www.canva.com/font-combinations/http://fontpair.cohttps://www.typewolf.com/http://font-combinator.com/
ImageryADVENTUROUS
EXCITINGBOLD
SCAREDDANGEROUSDEADLY
Use beautiful photography
STOCK PHOTOGRAPHY https://www.pexels.com/https://unsplash.com/https://stocksnap.io/http://www.gratisography.com/https://www.splitshire.com/
Copywriting
Source: http://www.paznow.com/ucd/
Stanford Guidelines for Web Credibility
ü Make it easy to verify the accuracy of the information on your siteü Show that there’s a real organization behind your siteü Highlight the expertise in your organization and in the content and services you provideü Show that honest and trustworthy people stand behind your siteü Make it easy to contact you
ü Design your site so it looks professionalü Update your site’s content often (at least show it’s been reviewed recently)ü Use restraint with any promotional content (e.g. ads, offers)ü Avoid errors of all types, no matter how small they seem
Stanford Guidelines for Web Credibilityhttp://credibility.stanford.edu/guidelines/index.html
BuildCLICK TO ADD TEXT
Austin Responsive
London Responsive
Toronto Responsive
iMIS RWD Toolkit
Classes
Extra Small Devices:Smartphones (less than 768px)
Small Devices:Tablets (greater thanor equal to 768px)
Medium Devices:Laptops (greater than or equal to 992px)
Large Devices:Desktop monitors (greater than or equal to 1200px)
hidden-xs Hidden Visible Visible Visible
hidden-sm Visible Hidden Visible Visible
hidden-md Visible Visible Hidden Visible
hidden-lg Visible Visible Visible Hidden
iMIS Layouts = Bootstrap Grid
Install Google Analytics & Mouseflow
Demo
Test & Gather FeedbackCLICK TO ADD TEXT
Functional TestingCROSS BROWSER• Chrome• Firefox• Safari
DEVICE TESTING• iOS• AndroidTOOLS• Browser Stack• Device lab• Developer toolbars
Gather feedbackUSABILITY TESTING• Existing website• Sketches• Wireframes
TOOLS• Usability labs• Invision app• Morae
Gather feedbackUSABILITY TESTINGRECORDINGS• Multiple devices
• First hand scenarios• Mouseflow
https://mouseflow.com/
Gather feedbackUSABILITY TESTINGRECORDINGSANALYTICS• Error logs• Return Visits, not Bounce
Rate• Device • Calls to action
Case StudiesAward Winning iMIS Websites
EvolveCLICK TO ADD TEXT
UXVISITORS NEEDS
BUSINESS GOALSUX
UX
Usable
Useful
Desirable
AccessibleCredible
Findable
Valuable
https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience
Research
DesignTest
Evolve
Build
ResourcesCLICK TO ADD TEXT
Inspiration
Nielsen Norman Group - https://www.nngroup.com/Smashing Magazine - https://www.smashingmagazine.com/User Interview techniques:http://www.slideshare.net/edanzico/user-interview-techniques
THANK YOU TO OUR SPONSORS
FOUNDING PARTNER
PLATINUM PARTNERS
GOLD PARTNERS
SILVER PARTNERS
