{"id":585,"date":"2010-02-09T10:07:32","date_gmt":"2010-02-09T09:07:32","guid":{"rendered":"http:\/\/www.stevebromley.com\/blog\/?p=585"},"modified":"2019-11-06T17:45:03","modified_gmt":"2019-11-06T16:45:03","slug":"the-uncanny-valley-of-wireframes-and-ux-testing","status":"publish","type":"post","link":"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/","title":{"rendered":"The Uncanny Valley of Wireframes"},"content":{"rendered":"

The uncanny valley is a theory describing how, as games and robotics produce more accurate representations of humanity, people\u2019s reactions towards them are increasingly negative. This is also true with the production of wireframes, and in user experience testing and is something user centred designers need to be aware of.<\/p>\n

The uncanny valley<\/a> was originally discovered in the field of robotics, but also frequently applies to video games. It describes a phenomenon with replications of humans, whether they are life-like androids or avatars on a computer game. Initially, as the reproduction of a human and its movement becomes more lifelike we react more positively towards the object, so we\u2019d like Lara Croft more than Leisure Suit Larry. However a point is reached, when the reproduction becomes too life-like, and the emotional response drops rapidly, meaning we feel repulsed from the object. Consider Keanu Reeves\u2019 acting. Almost human, but utterly repulsive!<\/p>\n

The term \u2018uncanny valley\u2019 therefore comes from plotting a graph showing our emotional response against how lifelike the reproduction is, with a sharp \u2018valley\u2019 appearing in the emotional response between a very lifelike reproduction, and the real thing.<\/p>\n

\n
\"Uncanny

Got that?<\/p><\/div>\n<\/div>\n

A similar phenomena can be seen in the production of wireframes, and hence is of critical importance to UX designers. After spending hours producing beautiful wireframes in Omnigraffle, I presented them to a client, to show how their \u2018event registration\u2019 pages would function. They came back and said \u201cyeah it looks good, but we need to change that label text\u2026 and we need to make the dropdown arrow bolder\u2026 and can we make the heading font bigger\u201d. This was their first view of the wireframes, to approve whether they functioned correctly, and it\u2019s obvious what I\u2019d done wrong.<\/p>\n

The time and effort I\u2019d put into making the wireframes look good, and look like a real website weren\u2019t just wasted, they were actually hindering the process \u2013 since the mock up looked like a real webpage, the client was focusing on the small presentational details, and not the functionality itself. They expected it to look and function like the final product. If instead, I\u2019d done a rough sketch on paper to demonstrate how the registration process should work, the client would have focused on the functionality instead. A design that looks to be in the early stages will encourage more far-reaching comments and criticism, rather than \u2018fine-tuning\u2019.<\/p>\n

This is most important when you\u2019re trying to focus the user experience when performing tests, especially with people not overly familiar with your site or game. Performing tests to ascertain the correct information architecture, or user\u2019s experiences with a website\u2019s functionality would be useless if all your comments ended up being about the site\u2019s colour scheme. To make it clear that the designs are rough, and the presentation is not the focus, it is important not to create overly realistic designs.<\/p>\n

Similarly care should be taken to pick an appropriate prototyping method. Paper isn\u2019t used just because it\u2019s quick and easy, but it also helps manage the client\u2019s expectations. If you spent the time making the webpage on a computer, they\u2019d be expecting it to work like a real product. On paper, this isn\u2019t the case. Like the uncanny valley, getting too close to the real thing will be detrimental to the client\u2019s perception of your work.<\/p>\n

\n
\"Uncanny

And you wouldn't want your work to look like this...<\/p><\/div>\n<\/div>\n

So, what steps do we need to take to ensure that the client, or user will focus on the right areas of your wireframes and designs?<\/p>\n

    \n
  • When performing initial designs, use lo-fi methods, like paper, post-stick notes, and whiteboards, where possible<\/li>\n
  • If using design software, like Pidoco or Omnigraffle, use a \u2018sketches\u2019 template, which renders your design in a pseudo-drawn method.<\/li>\n
  • Avoid drawing\/designing unnecessary parts of the design \u2013 focus only on the essential<\/li>\n
  • Use filler text, and don\u2019t work on the copy until later.<\/li>\n
  • Make it clear to the user\/client that these are rough, disposable prototypes.<\/li>\n<\/ul>\n

    So, whether you\u2019re working with a client to design their site, or conducting user testing, take care not to over-present the design, in order to manage expectations, and prevent unnecessary complaints!<\/p>\n","protected":false},"excerpt":{"rendered":"

    The uncanny valley is a theory describing how, as games and robotics produce more accurate representations of humanity, people\u2019s reactions towards them are increasingly negative. This is also true with the production of wireframes, and in user experience testing and is something user centred designers need to be aware of. The uncanny valley was originally […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[118],"tags":[10],"class_list":["post-585","post","type-post","status-publish","format-standard","hentry","category-user-research","tag-design","grve-entry-item","grve-blog-item"],"yoast_head":"\nThe Uncanny Valley of Wireframes - Steve Bromley - User Research<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Uncanny Valley of Wireframes - Steve Bromley - User Research\" \/>\n<meta property=\"og:description\" content=\"The uncanny valley is a theory describing how, as games and robotics produce more accurate representations of humanity, people\u2019s reactions towards them are increasingly negative. This is also true with the production of wireframes, and in user experience testing and is something user centred designers need to be aware of. The uncanny valley was originally […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/\" \/>\n<meta property=\"og:site_name\" content=\"Steve Bromley - User Research\" \/>\n<meta property=\"article:published_time\" content=\"2010-02-09T09:07:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-06T16:45:03+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.stevebromley.com\/blog\/wp-content\/uploads\/2010\/02\/uncanny_valley_chart.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#website\",\"url\":\"https:\/\/www.stevebromley.com\/blog\/\",\"name\":\"Steve Bromley - User Research\",\"description\":\"Usability and User Research for Websites, Software and Games\",\"publisher\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#\/schema\/person\/9c0be0bbd079c086677d422d1fd9c8c7\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.stevebromley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/www.stevebromley.com\/blog\/wp-content\/uploads\/2010\/02\/uncanny_valley_chart.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#webpage\",\"url\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/\",\"name\":\"The Uncanny Valley of Wireframes - Steve Bromley - User Research\",\"isPartOf\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#primaryimage\"},\"datePublished\":\"2010-02-09T09:07:32+00:00\",\"dateModified\":\"2019-11-06T16:45:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/\",\"url\":\"https:\/\/www.stevebromley.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/\",\"url\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/\",\"name\":\"The Uncanny Valley of Wireframes\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#\/schema\/person\/9c0be0bbd079c086677d422d1fd9c8c7\"},\"headline\":\"The Uncanny Valley of Wireframes\",\"datePublished\":\"2010-02-09T09:07:32+00:00\",\"dateModified\":\"2019-11-06T16:45:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#\/schema\/person\/9c0be0bbd079c086677d422d1fd9c8c7\"},\"image\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#primaryimage\"},\"keywords\":\"design\",\"articleSection\":\"User Research\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.stevebromley.com\/blog\/2010\/02\/09\/the-uncanny-valley-of-wireframes-and-ux-testing\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#\/schema\/person\/9c0be0bbd079c086677d422d1fd9c8c7\",\"name\":\"Steve Bromley\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4dfbbfc5a00187fd6f5fd405361347b2698a65a866f49de07f9486895b6c7029?s=96&d=mm&r=g\",\"caption\":\"Steve Bromley\"},\"logo\":{\"@id\":\"https:\/\/www.stevebromley.com\/blog\/#personlogo\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/posts\/585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/comments?post=585"}],"version-history":[{"count":8,"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":630,"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/posts\/585\/revisions\/630"}],"wp:attachment":[{"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stevebromley.com\/blog\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}