Category Archives: User Experience

14 Web Site Graders To Test Your Redesigned Site

When you redesign or enhance your site, you make a lot of changes.  You change the content, the design, the front end technology, the back end stack, the user flows, the information architecture, everything.  It is tough to know what you have done right, and what needs help, particularly as it compares to other sites.  These sites can help show you what you have done right, what needs help, and how you compare to other sites.  I use them… and so should you.

  • https://website.grader.com/ – the gold standard of online web site graders. Shows performance, SEO, mobile capability, and security.
  • https://www.semrush.com/ – this site gathers a LOT of marketing information about your site… Monitor this information before and after your cutover.
  • https://validator.w3.org/ – Are you W3C Compliant?  Are you writing valid HTML?  Using this throughout your development will ensure your site is as readable and indexable as possible.
  • http://www.webpagetest.org – How long does the first view of my page take?  How about the second view?  This grader shows you both… just like the Developer Tools in Google Chrome.
  • https://developers.google.com/speed/pagespeed/insights/ – another technical site grader that can give you guidance where to increase performance.  Be careful trying to get 100/100, though… not everything NEEDS to be done.
  • http://nibbler.silktide.com/en_US – Evaluates your site down in four areas – Accessibility, Experience, Marketing, and Technology.  Still useful to get another view of your site.
  • https://www.woorank.com/ – “Run a review to see how your site can improve across 70+ metrics” – Marketing, SEO, Mobile, Usability, Technology, Crawl Errors, Backlinks, Social, Local, SERP Checker, Visitors.
  • http://www.similarweb.com/ – Another great site for a large, corporate web site.  But not a lot of information about performance.  Good to monitor usage and marketing metrics.
  • https://moz.com/researchtools/ose – Moz is known for its SEO tools, and this is an easy dashboard of information to monitor before and after your redesign.  The free version is useful, but the Pro version is even better.  Not a lot of tech help here, though.
  • http://www.alexa.com/ – 7 days for free, the paid version is the only one really useful.  Lots of marketing information is available, though.
  • http://builtwith.com/ – Very technical.  Shows you the infrastructure and software choices made by the development team.  You will be surprised.  Helpful for technology and information security teams.
  • http://www.google.com/analytics  – Free analytics tool.  Tells you who uses your site, how much, where they are from, what browsers, what time of day… a plethora of information.  Including Page Speed.
  • https://www.google.com/webmasters/tools – Free tool that shows you what index errors Google has encountered, things to make your site more indexable, and what your pages look like to the Google Search Crawlers.  Use this.
  • http://www.bing.com/toolbox/webmaster – Everything that Search Console is for Google, this site is for Bing.

So did I miss any tools that you use?  Are any of these ones you have struck off your list?  How do you measure results of your site before and after?  Leave a comment and let me know!

EDIT: Two more sites were recommended to me that help redesign projects, so I am adding them here:

2 New jQuery Plugins

I have just finished creating two new jQuery plugins.  I found them very useful for my own site, and thought I would share them with everyone else.  One is called FlickrTools, the other is SocialCards.

FlickrTools

FlickrTools is a simple jQuery plugin that queries the Flickr API, and gathers all the images that match a certain tag.  At some point, this can be expanded to query other properties in the API, but this is the simplest way to start.  I use my flickr images as part of my home page hero, and as a rotating carousel of images.  One of the nice things about this plugin is that the data retrieved from the query is reusable between both features on the site.  The hero is custom jQuery, whole the carousel uses Slick.

SocialCards

SocialCards is a jQuery plugin that queries all of your social media outlets and gathers all of your recent content into cards and displays them on your own site.  Currently it queries blog posts, Etsy, Flickr, Foursquare, GoodReads, Pinterest, and Tumblr.  Soon to be developed are Facebook, Google+, Instagram, Twitter, and Youtube.  It uses a masonry style based on the one I found on w3bits, that is configurable using CSS, included in the sample.  The plugin integrates with the Google API for easy RSS reading, and with Yahoo YQL API for other more complex data.

Please feel free to give these a try.  These are the 1.0 release, so they may not fit your needs exactly.  Reach out to me at brian.whaley@gmail.com with any comments, suggestions, or constructive criticism.

One Site Design when Serving Two Masters

I have recently come across this situation during a site redesign project.  There are two primary objectives for the web site property, each with their own distinct and unique persona.  What do you do in this situation?  I recommend you embrace the bipolar nature of the site, and use a split screen design.

A split screen design, as it suggests, splits the home page in half, each side embracing one of the personas.  You can design each side to look very different – color schemes, styles, fonts, etc.  Shared elements such as header, footer, navigation, hero images, etc. bridge the gap between the different sides of the site.  The hero can rotate between different calls to action, focusing on the personas and themes.  And, shared pages such as the home page can be a continuous scroll to allow the large volume of content.

Instead of fighting the nature of the beast to blend the personas, embrace  the content divide, emphasize it, and stay focused on your users.

Here are some examples of Split Screen Design I have come across in my research:

Upgrades to My Web Site – Eating My Own Dog Food

It has been a couple years since I have made any big changes to my web site, so I thought it was time.  I have taken my own advice in my post 2014 Web Design Trends, and added some changes to my own site.  I have flattened the design, added a hero image area, focused on Mobile First design, trimmed some text, and focused on a card based design.

Flat Design

I have made some minor changes to focus on a flatter, simpler design.  I have removed shadows and rounded corners throughout.  This makes the site look lighter, simpler, and cleaner.  I like the look. You can see more at 25 Delightful Flat Design 2.0 Websites for Inspiration.

Fixed header and navigation

I have anchored the header and navigation at the top of the page, so that it is visible even if you scroll away from the top of the page.  This is a very popular technique, particularly if the header and navigation is kept slim.  You can see more examples of fixed header and navigation areas at 22 Examples of Fixed Position Navigation in Web Design.

Hero Area

I have added a hero area on the home page, which showcases my own photos stored on flickr.  This adds a lot more interest and personalization to my site.  Some additional examples of this design can be seen at 30 Web Designs that Fully Embrace the Hero Image.

Mobile First

The amount of traffic coming from mobile devices increases with each passing day.  Building mobile specific web sites or applications separate from your desktop web site is not sustainable.  My site is now accessible on phones, tablets, desktops, and extra large screens.

Less Text

I have trimmed the extra, unneeded filler text from each of the different areas of my web site.  this kept the site focused on the original content, and on my photography too.

Card Based Design

This is a very popular design lately.  I have gathered and organized my most recent social media content from pinterest, tumblr, twitter, and my blog, and displayed it on my home page.  Each post, tweet, and pin is shown as a separate card.  I like that it is always updating and follows my pixelated design theme.  You can see more examples of card based designs at 15 delicious examples of card-based web design.

2014 Web Design Trends

It may be a bit late, but I did a little bit of research on the web design trends of 2014.  It is important to stay on top of these trends – not only to develop a cool site for you or your company, but to provide a simple interface for your users that follows conventions they understand.

Here are the articles I read ( in no particular order, just the first ones to show up in a Google search) :

Based on what I read, there are 11 basic themes across all the articles:

  1. Flat Design, simple or monochromatic color schemes (black and white plus one color)
  2. Typography – large type, expressive fonts
  3. Hero Areas vs Sliders, big images, image backgrounds, video backgrounds
  4. Mobile First, responsive design, simplified design, CSS instead of images
  5. Scrolling sites, parallax scrolling
  6. Less text, richer content, more graphs, videos, interaction, infographics
  7. Short, burst content (a la twitter)
  8. Micro UX – heightened attention to tiny details
  9. Cards, Tiles
  10. Minimalist navigation, fixed navigation, drop the sidebar
  11. Social media integration, 3rd party services, SAAS, open source

I have practiced most of these trends myself in the last 2 years – flat design, image backgrounds, mobile first and responsive deign, more graphs, micro UX, minimalist navigation.  The others I have seen in my travels through the internet.   It is good to know that even through all the years, I still haven’t lost it.

Main Course – My Motorola Droid, With a Blogroll for Dessert!

Motorola Droid

So I have traded my Samsung i760 running Windows Mobile 6 for the Motorola Droid running Android 2.0.1 code named Eclair. I am loving this phone. It is just as good as (some even say better than) the iPhone. It is fast, comes with a speaker phone, a big screen, built in wifi, bluetooth, and GPS, is based on Linux, is all open source, and is a slider so I have a physical keyboard. The hardware, OS, and software are all very finger-friendly. The Android market doesn’t have as many apps as the iPhone yet, but there are still thousands to choose from and the number is growing every day.

My Favorite Apps

The first thing I did was to connect my Gmail account to my Android phone. I instantly got my Gmail, Google Calendar, and Contacts synced. Then I connected the email and calendar client to my Outlook account at work. I love how the Corporate Contacts app can look up people at work without any additional information.

Plantronics Voyager Pro

I also bought a new Plantronics Voyager Pro and hooked it up to my new phone.  What a great pair!  The bluetooth connection is great, the noise cancelling works awesome, the volume is excellent… i am so glad I bought this!

Blogroll

And here are some of the great articles that i have read recently on SEO, social media marketing, and user experience.

Mobile-izing an Existing Site

There has been a lot of talk amongst my clients lately on how to make our existing sites more mobile device compatible. We have done some brainstorming, and have come up with some ideas on how to do this.

Build a separate site

The simplest thing to do would be to do build a separate site for mobile users. Some simple user agent switching based on the user’s browser can take mobile phone users to the separate site. The new site can then be tailored for smaller screens, be less graphics intensive, and develop alternative solutions for Flash components.

Full Redesign of the existing site

Another possibility would be to build one site that has enough logic to manage multiple resolutions. This could be through multiple master pages, separate sets of images, JavaScript to display different image sizes, different CSS files, and a fluid CSS based layout without tables. This can be cumbersome and time-consuming, but may be a good approach long term. This will accommodate both large monitors on desktops, smaller resolutions on netbooks, and tiny resolutions on mobile phones.

Hybrid approach

One approach we are considering is a hybrid approach, combining the strengths of the first two approaches. If we have two domains with user agent switching, we can optimize each of the sites – one for mobile users and one for full browser users. Each site could have its own master page or template with its own separate set of images. We can reduce the work by tagging the reusable content with specific div or span labels, and reuse them on the mobile site.

Build a Mobile App instead

Building a separate mobile application for each of the major phone platforms would allow the development team to tailor the user experience to the individual phone. Delivery to the phones and advertising the mobile application may make the user base smaller. We would also need to develop across at least 4 different platforms – Android, iPhone, Windows Mobile, and Palm. There are multiple versions of the platform to manage, as well. The phones that use a custom platform would then miss out on the entire mobile experience.

Invest in a tool or 3rd party

There are lots of third party tools that can be used to help migrate or transform your site into a more mobile friendly experience. Some of the companies who develop and support these tools either have fully managed solutions or have a consulting services group that can be hired to help you through this process. There are also a lot of companies who say that they specialize in mobile-izing sites that you can contract with, and I am sure they are not cheap.

Do Nothing

The further technology advances, the more this option becomes really viable. The iPhone’s browser has multi-touch pinch-to-size technology, allowing you to zoom in and out of the HTML page. The Android is releasing this as well very soon, but in the interim has a zoom feature. Even the old Windows Mobile 6.0 phone I used to use had a custom browser with zoom technology for the pages it rendered. the more improvements in technology, the less developers will need to customize based on resolution.

What are your thoughts?

What are you or your team doing to break into the mobile arena? Do you prefer one of these solutions over another? Do you have another idea or approach you would use? What tools or 3rd parties are you using to mobile-ize your site? Leave your thoughts, ideas, or experiences here and share with others!

Usability Week 2009 – Day 3

Day 3 was the final day of the Usability In Practice 3 Day Camp. Today the presenters covered a wrap up of how to report your findings by reviewing our homework. Reviewing the bad Findings Report was just as informative as seeing the good report. They also covered paper prototyping, field studies, how to finance usability studies, the cost benefit analysis of your work, and successful usability programs.

Paper prototyping is a low-fidelity, cheap and easy way to try lots of different ideas for new designs without spending a lot of time building them. It is also great for setting expectations that this is not a polished product, so the critique stays much more focused. Paper prototypes are great for reviewing navigation, work flow, layout, content, terminology, labels, and naming conventions. Testing will run very similar, except your users will use a pen instead of a mouse and keyboard, and you will have an additional person in the room playing the part of the computer.

Field Studies area great way to get lots of information about your customers. These studies show how their environment affects how they use your product. Artifacts, or the things around your users, give you clues to their habits, tools, and distractions. Be sure to tell your subjects not to clean up before you arrive! And if you are going to view someone like a call center employee, don’t let their manager give you a demonstration instead. They will definitely use the application differently, if at all. Field studies will provide lots more information, so be prepared to record all the data in different ways.

Jakob Nielsen presented some great numbers on usability testing. If the time of an employee is subtracted, the only cost of usability testing is the cost of incentives. Usability budgets for big projects from major corporations average around 10% of the project’s budget. What you should expect to see is an increase in conversion rate, a decrease in bounce rate, an increase in community participation, and an increase in clickthrough rates.

Kara wrapped up the session with a discussion of usability programs. The focus wason building user-centereddesign and testing into your projectsfrom the beginning. This means that usability needs to fit within the existing project structure withinan organization. This can happen in centralized, decentralized, or matrix organizations. Having acentralized repository for all usability documentation will instill a cultureof knowledge management and continuous improvement. Start small, make management your ally, and you will be great!

This was a really great session. I walked away with a lotof information on how to conduct usability tests, and how to indtroduce this continuous improvement methodology into our organization. It is nice to move on to a new topic, however. I think our lecturers did a great job, but were getting tired of seeing the same faces day in and day out. A couple of us even noticed that they were cutting Q&A sessions short to avoid some of the participants who could not seem to stay on track. Unfortunately, it did limit other people from asking pertinent and intelligent questions. Looking back, there wasa brief discussion on usability guidelines. I was hoping we would have spent more time on this. This left me looking forward to the sessions over rest of the week.

Hopefully, some of my friends from Usability Week 2009 are reading my blog now. Any comments yet, usabilitists?

Usability Week 2009 – Day 2

Today started off reviewing our homework. We had to write an objective and 3 to 5 tasks to review the inmod web site. We spent the first half hour reviewing the tasks in small groups. I am always surprised when working in small groups how easy it is for people to take the group off track.

The big topic for session 2 was about conducting the user test. You need to make sure that not only you are prepared, but everyone involved is prepared. The steps of a user test session are Introductions, Run the test session, Debrief the user, and Prepare for the next session. You should prepare the participant for what to expect, and make them comfortable. Stay as neutral as possible during the session. Get any final feedback you may need from the user, and answer any questions they may have. Then reset the computer and get your notes ready for the next test.

After all the sessions, it is time to analyze all of your new data. You organize your data into Findings with supporting details, assign each of the findings a Priority, make Recommendations that are based on the findings, and then cycle your changes into the next development cycle. All of this information should be included into a Report of your Findings. You should try to provide a short, informal report within the first 24 hours, and a more detailed, formal report within two weeks. Your reports should focus on the positive (what worked well) as well as the negative (what needs improvement). You should also formally present your findings to your client. Keep your meetings short. Leverage the video you took and include quotes from the users.

Jakob presented variants to the user testing methodology. You can test more than one user at a time, if it makes sense (like husband and wife, co-workers, etc). When you cant go to the user, and the user can’t come to you, remote testing is one of the last possibilities. You can also test more than one site (either two separate designs, or competing sites). Sometimes you may want to follow users over an extended period of time, so diaries or videos can be used. Eye tracking is a new technology that is very useful with video recording.

Based on the studies that NNG have implemented, tehy have found that the ROI per user tested is maximized at 4 users. They recommend on testing 5 users to be sure that you are safe in your results. But, anything beyond 5 users, the number of findings flattens out but the cost continues to increase incrementally.

You also need to be very careful when testing users with special needs. Disabled users and low literacy users should be tested with simpler tasks and shorter sessions. Senior citizens love teh attention and are over polite, but should also be given less tasks, and expect more time for the introduction and wrap-up of the session. Testing childres is also very different than testing adults. Testing in schools is ideal, if you can get permission. Shorter sessions and co-discovery methods make testing easier. International testing can be much more expensive, as it requires translators or much more travel. Hardware testing works similar to software testing, but you need the real product to test.

Jakob closed this session with a discussion of the ethics of user research. You need to remember that these are people that you are testing. You need to treat them with respect and dignity. The rule of thumb is that you should treat them as you would want to be treated.

After today’s session, a few of us went to a sports bar to watch the North Carolina / Michigan State game. The three of us that went all had ties to Michigan. Shawn and his wife live there now, Rebecca has bounced back and forth between Detroit and Chicago, and I used to live there when I was very young. Naturally, we were all cheering for Michigan State. After 3 minutes of the game, Michigan State was down 15 points, and they never recovered.

Usability Week 2009 – Day 1

Sunday was the first day in a 3 day intensive boot camp on how to run User Tests called Usability In Practice. I have been trying to keep up with my activities in Washington, D.C. by posting on Twitter as well as here on my blog.

Hoa Loranger kicked things off by covering the foundations of usability. She explained that you and your colleagues have a very different experience than your users, and makes it very difficult to predict their needs. This is the basis of user-centered design. She covered 5 dimensions of usability as a quality criterion – learnability, efficiency of use, memorability, errors, and subjective satisfaction. The relationship between design and usability is like the relationship between writers and editors. The Discount Usability method focuses on qualitative rather than quantitative tests. This provides faster methods with fewer resources.

Hoa then introduced the user testing methodology. This is a simple way to collect forst hand data from real users. It is a simple feedback loop – plan your user tests, conduct the tests, analyze your findings, present your findings, and finally modify your designs and retest.

Janelle Estes then took over and walked us through most of the methodology. She covered how to plan your study, how to recruit your participants, how to write your tasks, how to choose your location, and how to observe and take notes. When planning your study you need to decide exactly what you will be testing, what metrics to collect, and how to identify your target users. When recruiting participants, don’t under-estimate the amount of time it takes to find participants. A screener, or script of questions, is a great way to opt in or opt out possible recruits. Once chosen, send a confirmation letter to your users, and include information about their incentives to show up. Schedule your sessions with both their time and your time in mind. When writing your tasks, keep them focused on the goals of the test session. You can have first impression questions, exploratory tasks, and directed tasks. When choosing the location, you need to keep the user, the tester, and the observer in mind. Should it be in-house in a conference room, or in a usability lab? Be sure that you can capture your setup with screen capture, audio and video, time and note taking. Pilot your test before your users. Be sure that on the day of the tests you are ready to take your notes with a notebook or spreadsheet.

Jakob Nielsen then wrapepd up the day presenting information on the Usability Toolbox. He discussed a number of different sources of data and techniques to improve your site or application. Improvement of your site can be fit into any systems development lifecycle. Jakob also walked through Expert Review methods. The first method is a Heuristic Evaluation – a way for experts to examine the interface. The second method is Guidlines inspection – a way to inspect the site relative to a list of guidelines. An interesting thing that he brought up was the expected vs actual results of a Leikert scale. When implementing subjective satisfaction surveys, keep in mind that when using a Leikert scale of 1 to 7, the mean is usually 4.9, not 4. This means that human nature is not to give a 1 or 2, changing to a Leikert scale of 1 to 5 (or 3 to 7, actually). Very interesting.

So that wrapped up Day 1. Lots of great information. Tomorrow will cover conducting the tests, and analyzing, reporting, and presenting the results.