{"id":2222,"date":"2013-04-01T09:18:38","date_gmt":"2013-04-01T16:18:38","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=2222"},"modified":"2016-02-19T14:41:35","modified_gmt":"2016-02-19T06:41:35","slug":"firefox-next-evolving-the-user-interface-using-genetic-algorithms","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2013\/04\/firefox-next-evolving-the-user-interface-using-genetic-algorithms\/","title":{"rendered":"Firefox Next: Evolving the User Interface using Genetic Algorithms"},"content":{"rendered":"

Optimizing the Interface is Hard<\/h3>\n

Creating the perfect Firefox interface is a challenging problem. Every user has their own set of common tasks. The challenge is in defining a common “default” interface that maximizes task success for the most people, on the most tasks. Using designer insight alone, it’s not always easy to know the impact of each design element!<\/p>\n

Genetic Algorithms<\/h3>\n

Genetic Algorithms<\/a> are well-suited to suggesting novel solutions to complex optimization problems.\u00a0 If one can define the right optimization (fitness) function, GA can calculate the impact of including and placing elements. Using data recorded from Test Pilot Heatmap studies<\/a>, we have defined a set of “Web Activities” that describe what users actually do using Firefox. These included “search”, “surfing the net”, and “content creation”.<\/p>\n

Evolving the interface<\/h3>\n

We divided the visible interface space into 14,000 “cells”. Each of the 100 possible interface elements were given starting positions, and allowed to grow randomly until all cells were used. We then simulated a set of common user tasks using each random interface, proportional to how often those tasks occurred in the recorded Test Pilot data set. An interface “did well” if the user didn’t have to move the mouse much to complete the task. Top performing interfaces were kept and allowed to “mutate”, by allowing UI elements to “grow” or “shrink”.\u00a0 When interface elements got “too small”, they were placed behind the “more options” element, and assigned a higher cost to access.<\/p>\n

Firefox Next<\/h3>\n

Within 700 generations, good candidates started emerging, and by generation 1100, convergence was achieved. We then chose the most visually appealing one as our candidate. \u00a0 GA led to some ragged edges, so did some visual cleanup to squarify elements.\u00a0 This “cleaned” candidate preformed with 98.1% of the effectiveness of the original.\u00a0 The result, which we are calling Firefox Next, appears below. Bubbles describe the salient features. In particular, note:<\/p>\n

    \n
  1. Careful balance between user needs for content, and user desire for web advertising.<\/li>\n
  2. Much larger “back” and “scroll” elements — the commonest interactions users have with browser.<\/li>\n
  3. Page content de-emphasis, so that users can achieve other tasks on the internet easily.<\/li>\n
  4. On-screen keyboard, for easy form filling and content creation.<\/li>\n<\/ol>\n

    \"Firefox<\/a><\/p>\n

    Conclusion<\/h3>\n

    Bringing quantitative methods into design is an emerging field. Firefox Next demonstrates that even without expert designers, quantitative methods alone can create a beautiful, easy-to-use interface.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Optimizing the Interface is Hard Creating the perfect Firefox interface is a challenging problem. Every user has their own set of common tasks. The challenge is in defining a common … Read more<\/a><\/p>\n","protected":false},"author":395,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/2222"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=2222"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/2222\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=2222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=2222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=2222"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=2222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}