Revitalize your Digital Strategy with Web Design Best Practices. Virgil Carroll Founder / Principal Architect

Transcription

1 Revitalize your Digital Strategy with Web Design Best Practices Virgil Carroll Founder / Principal Architect

2 Figuring out your audiences Furious activity is no substitute for understanding. - H. H. Williams

3 setting the baseline The too-easy information model User asks question MAGIC HAPPENS User received answer

4 today s unique challenges People are barraged by information Our audience age gap is getting broader you have push through the clutter you have to understand how to communicate across generations There's a device for everything you have to figure out what message to push to each medium

5 why ux needs to be part of your marketing strategy? Marketing strategies tend to discover what people want but not how they find it (or if they will actually look) We have to provide people with an easy way to filter through the clutter Because we understand people s experience with us is important

6 getting to know your audiences Most marketing approaches do not work in a digital strategy Marketing tends to focus on organizational control of how a message is delivered The digital world has introduced total people control People choose when, how and why to interact with you People control their exposure True push communications are slowly becoming obsolete Often times an eyeball is captured at the exact right moment

7 getting to know your audiences Strategies Discovery workshops Information architecture activities Usability Just Ask!

8 discovery workshop An alternate format to requirements gathering and focus groups Get people interactively involved Discussion, discussion, discussion

9 discovery workshop Format: 6-8 people (keep it manageable) must not be related to efforts 5-10 minutes for each brainstorming session minutes of follow-up discussion after each one What you need: Post-It Notes (best to have a color for each person) Flipboard (sticky note version works the best) Pens / pencils Enthusiasm and patience

10 discovery workshop Website example

11 discovery workshop REMEMBER: Discovery workshops will give you a solid understanding of people s wants and desires, but its only a step in the right direction OPINION RIGHT

12 what is information architecture The structural integrity of meaning across contexts

13 IA breakdown Business goals, funding, politics, culture, technology, resources and constraints Purpose Vocabulary, rules, content types Language People Audience, tasks, needs, information seeking behavior, experience

14 purpose (context) Everything in your organization has a purpose Every person in your organization has a purpose for using information Look out for conflict between HYPOTHETICAL (or stated) versus ACTUAL (or achieved) purposes! the key to success is understanding and alignment Purpose Language People

15 language (content) and rules Every organization has its own vocabulary to follow How content is named and stored Terms that are used frequently (acronym hell) Every piece of content exists for a purpose (good and bad) Every organization has governance and cultural rules around how information is used Understanding content and organizational language is key Purpose Language People

16 people Every person has different experiences and abilities to draw from People are mostly out of our control, but we must try and understand them People have their own PURPOSE and LANGUAGE Purpose Language People

17 how do we figure out our IA? Surveys Card sorting Wireframe concepts Heuristic usability evaluation

18 what is card sorting? Card sorting is a technique that many information architects (and related professionals) use as an input to the structure of a site or product.

19 why use card sorting? Card sorting can help you identify trends Do the users want to see the information grouped by subject, process, business group, or information type? How similar are the needs of the different user groups? How many potential main categories are there? What should those groups be called?

20 types of card sorting Open Card Sorting Participants are given cards showing site content with no pre-established groupings. Closed Card Sorting Participants are given cards showing site content with an established initial set of primary groups.

21 wireframe concepts

22 usability s 5 quality components Learnability - how easy can the user accomplish basic tasks? Efficiency How quickly can tasks be performed? Memorability After a period of non-use, how easily can a user reestablish proficiency? Errors How many errors does the user / system make? How severe? Can the user recover? Satisfaction How pleasant is it to use the design?

23 Design considerations Good words are worth much, and cost little. - George Herbert

24 good design supports function We don t call it branding its design Design should never be used for the sake of pretty colors Balance must be established between the design and getting people to what they need to do Color contrast can help people be successful Making it mobile Just because you can, doesn t mean you should Popular frameworks: Bootstrap, skeleton, responsive grid system Use media queries vs device channels

25 UX best practices

26 Good SEO practices predicate good findability Structure is key to search understanding Proper use of H1, H2 tags, etc. Follow standard schema practices Schema.org Metadata tags are necessary upfront Good URL paths affect ranking SSL becoming more important

27 responsive design is about frameworks All frameworks are fundamentally similar All are open source (don t build your own) Popular Bootstrap great for functional components, larger size (also in Kentico) Foundation great for presentation only, small size Skeleton basic and simple Gumby much like bootstrap, cool name (must have Ruby for SASS functionality)

28 mobile vs desktop behavior Determine pattern that works best for platform Desktop tabs Mobile dropdown Re-order content for smaller screens Desktop rotator at top Mobile latest news at top

29 wrap components with responsive grid Wrap web part zones or web parts in responsive grid framework HTML to enable consistency across pages Allows benefit of grid without content editor Format WSIWYG on page nicely

30 make images flexible for scaling Large Hero images need to be planned well Determine whether scaling will work Scaling small images can look pixelated Scaling large images can affect performance

31 control responsive thru transformations Use transformation to create grid columns & rows for dynamic components Use multiple responsive <div> settings to adjust on the fly

32 plan for tables Different methods, but need a plan Tables are still a valid way to present Scrolling-style tables are easiest to implement

33 test with a breakpoint tester Look at each page layouts side by side (at different device sizes) Good for comparing spacing, font sizes, and images

34 build / use a control

35 fix responsive issues in Kentico admin Grids have issues in Page / Design view Mobile only images are hard to display Classes can cause overlap of UI edit components

36 fix responsive issues in Kentico admin SOLUTION Apply.EditMode override styles in page view Apply.DesignMode override styles to design view

37 Analyze to adapt The past should be a springboard, not a hammock. - Ivern Ball

38 analytics everywhere Web / social analytics can tell you a lot of what you are here to figure out If you don t have analytics get it! Hits don t matter at all (Its about pageviews and visitors) 40

39 what can you learn Web analytics Traffic sources Demographics Top pages User paths / patterns Social analytics Follower growth Effectiveness of links / wording Dashboards galore! 41

40 questions?? Virgil Carroll, President High Monkey Consulting Blog: