user-centered website design

Download User-Centered Website Design

Post on 14-Jul-2015

112 views

Category:

Design

3 download

Embed Size (px)

TRANSCRIPT

Slide 1

Tips and Tools to Attract, Convert and Delight Users

From Awful to Awesomegetlevelten.comi j k l m

Our access to information and ability to communicate is changing at a rapid pace.

80s: massive desktops. Leisure Suit Larry90s: Dial up InternetToday: my kids have never used a mouse, and to my knowledge have never used a desktop (mobile and ipad)1

SEONewslettersLanding PagesAnalytics / ReportingCRMAutomatedMarketing SystemsContent DeliveryNetworksDigital / Process ManagementProductOne-sheetsPress RoomBlogWikiForumContractsWorkflowMultiple LanguagesUser PermissionsVideo TutorialsApplication/Spec GuidesMobile AppsHighly integrated, interactive & flexible2At the end of the day we are creating these super-apps that give us the tools we need to Attract users. Convert them to customers. And analyze how we did it so that we can improve and delight.

But research shows that most projects are failing.

Houston, we have a problem.

Average cost overrun: 45%Time overrun: 63%Functionality delivered on average: 67%Chaos Report by The Standish Group: Application Delivery3Standish Group Chaos ReportProject reports from 2002 through 2010

Business models/requirements change often which changes the scope of work.

Why do projects fail?We are asked to estimate things that are intangible.We make the most important decisions when we know the least about the product we are creating.Inability to communicate.4A wife asks her husband, whos a programmer, honey, could you please go to the store for me and buy 1 carton of milk. And if they have eggs, get 6. The husband returns a little while later with 6 cartons of milk. The wife asks him, why did you buy six cartons of milk?He replied, They had eggs.

Once you understand why projects fail, you can begin to shift the way you approach project, ask different questions and get better results.

2 week cyclesWaterfallAgileWaterfall vs. Agile5Waterfall seems to be more about gathering all the requirements at the beginning of the project, then estimating price and building. The more time you spend in gathering requirements, the more you can narrow the cone of uncertainty, but the slower you are to design the site and the less opportunity you have to change the scope.

Agile just enough planning to get going. Regular (sometimes daily) communication with client discussing project and building as you go.

Start by understanding your business goals.You shift the mindset of the team by changing the way you gather information and communicate with the team.6

What is your overall marketing strategy?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?7

What are your sales goals?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?8

How many leads do you need to hit your sales goals? Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?9

What are your top 3 initiatives for quarter/year?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?10

What competition do you face?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?11

Why is your website important for your business?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?12

Do you feel like you get enough visitors to your website?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?13

Are you happy with the rate your website converts visitors into leads?Lets take a client that wants a website redesign. We want to know why the site is being redesigned.

Old copy. Need more features. Hard to manage. Need interactive site. Etcbut why?14

Focusing on business goals changes the way we communicate with decision makers.You shift the mindset of the team by changing the way you gather information and communicate with the team.15

DiscoveryThere are a lot of things to be determined during discovery and a lot of way to gather information:

Surveys, competitive research, analytics16

VARStep 1: Identify Users & Goals 5ContentContributorCurrentCustomerProspectUnderstanding who the users are, what the are looking for, what will they do once the find it, what type of device do they use, etc. are all very important to reaching your goals.17

5As a prospect, I would like better understand how Company Names products/services will improve my life.Step 2: User NeedsTesting notes.18

5As a prospect, I would like the ability to share what I learn with my co-workers.Step 2: User NeedsTesting notes.19

5As a prospect, I would like the ability to download white papers to learn more about your technology.Step 2: User NeedsTesting notes.20

5As a prospect, I would like access to your learning section so that I can familiarize myself with your technology.Step 2: User NeedsTesting notes.21

5As a VAR, I would like the ability to download sales and marketing material so that I can sell more products.Step 2: User Needs22

Step 2: User Needs5As the marketing manager of the site, I would like the ability to run reports to see how many leads were generated last month.Testing notes.23

Attract. Convert. Improve. Delight.There are a lot of things to be determined during discovery and a lot of way to gather information:

Surveys, competitive research, analytics24

79% of links users click on are organic, not paid.Attraction StatsCompanies that blog have 97% more inbound links Auto-posting to Facebook decreases likes and comments by 70% 80% of Pinterest users are female57% of TV viewers use the web simultaneously25

CTAs promoting ebooks get almost twice the click-through-rate as emails promoting webinarsConversion Stats & TipsCompanies with 30+ landing pages generate 7x more leads than those fewer than 10CTAs in contrasting colors to the website generate more clicksUse matching action verbs on headlines and buttons are more effective than using different words26

1024 x 768320 x 480Mobile First MentalityFor years we had debates about what screen size to design forfinally we came to an agreement 1024x768

Take that and compare to typical smartphone screen size and you just lost 80% of the screen space that means 80% of the things on your desktop space wont fit! Which is awesome!

Its not like we would just fill our webpage with a bunch of stuff. Right?27

Is everyone here familiar with Change Blindness? Where if I show you two images that are similar you might not be able to tell the difference? Here is a little experiment

28

Is everyone here familiar with Change Blindness? Where if I show you two images that are similar you might not be able to tell the difference? Here is a little experiment

29

Show the structure of the website

Custom user paths

Most important user interface elements, their position and relationships between website pages

Wireframes30

Wireframe SoftwareOmniGraffle

Favorite of Mac community

Originally designed as a diagram tool

Wide range of stencils31

Balsamiq Mockups For people who want a quick and dirty layout

Built on Adobe AIR

Provides a variety of hand-drawn pre-built objects

Wireframe Software32

Axure RP Available for both Mac & PC

Boasts a client list that encompasses most successful companies around

Very flexible with many widgets, libraries and master document

Wireframe Software33

Wireframes: Things to Consider

DesktopMobileFocus on achieving business goals.Think mobile first and create accordingly.Always keep the end-user in mind.As a developer, always, always be involved in the process.Transition to mobile first34

Mood BoardsRepresent a mood, atmosphere or feeling as a way to research ideas for future comps that will be created.

Sets creative expectations

Gives designers better direction for comps

Saves time an money

35

Does the chosen typography compliment the brand and can it be translated to the web interface?Mood Board: Things to Consider Can selected patterns and/or textures be tiled to reduce the overall file size of the site? Can image ratios be re-sized appropriately, and can they be easily managed by less technical clients? Are the standard image sizes (4:3/16:9) or will they require cropping?36

CompsStatic look and feel of the final website.

Sets creative direction

Clients get excited like opening a present

37

Design ConsiderationsDesign for mobile firstThink about using circular buttons rather than squares and make large touch-pointsThink about how responsive design works and design site accordinglyDont over design. Keep it clean and simpleUse images that work well for mobile no embedded text within images

38

Theme IntegrationResponsive is a must

Twitters Bootstrap is LevelTens preferred framework

Choos