为了让原型设计和测试更真实和高效，Google又有新想法。几天前，来自Google Design的设计师Max Roytman在Medium上撰文，介绍了利用Chrome 插件进行原型设计和测试的思路和方法，可以在现有真实的网站上进行，利用网站上真实的数据，在不对网站进行真实改动的情况下，实现界面和交互层面的调整，实现原型的设计和测试。将大大增强原型的真实体验，提高网站改版的效率。因为Medium无法直接访问，UXTOOLS附上了以下是原文：
User Experience professionals are passionate about the benefits of using prototypes early and often in the product development process. These prototypes save the team time and development effort by catching design issues before they are cemented in product-ready code. Prototypes can be as simple as a paper model of the concept to fully detailed representations made to behave exactly like the final product. Typically the complexity and specificity of a prototype increases as product development moves along from exploring ideas to finalizing design details.
However, even the most complex high-fidelity prototypes often have to be tested narrowly since usability study participants have to stay along a specific usage path to maintain the illusion that the prototype functions as the real product would. This can lead to problems that aren’t caught until after a product’s release, including:
But for web products used on laptops and desktops, there is a handy solution: using browser extensions as a prototyping tool.
Extensions are small software programs that can be written to augment the behavior of the web browser. For instance, with the Pinterest browser extension installed, hovering over any image in a website with your mouse (such as on Wikipedia as shown left) reveals Pinterest’s “save” button which allows you to quickly add that link to the service.
Browser extensions provide an additional user interface above the hardcoded interface of the website. They can be used for augmentations as simple as changing the color of a header to adding functional features that do not exist in the website itself. Since the modifications are happening in the browser and not literally on any specific site, changes can apply to a multitude of sites all at once and don’t require administrative ownership over the site.
Our team has been working on an web service inside of Google to be used by our engineers. The information from that service crosses through many internal products and sites that are built by other teams within Google so testing with real data and user flows is critical to the success of the project.
This is where a chrome extension comes in. When a user has the chrome extension installed we can overlay new UI over the existing web pages they are already using. We can experiment with changes to diverse web pages and projects without all the complex logistics that would come from synchronizing code development across so many teams.
Using the extension, we were able to rapidly evaluate significant changes in six major rounds of design iteration. In each iterative cycle we conducted both formal usability tests and more natural “beta” tests in which a large number of Google employees agreed to install the chrome extension and report any problems they encounter doing their day to day work. Between testing cycles we varied the visual styling and content of UI components that appeared in the sites we wanted to integrate with. We were even able to experiment with introducing entirely new UI components to these web pages that didn’t exist on them at the time. Most importantly, for each iteration we were able to test our service with users’ real accounts as they went through their actual workflows. By the end, we were able to settle on a stable design to all our partner teams that would satisfy the needs of our shared users. These designs were provided with confidence because they were vetted through the study of real users. Using this process we were able to learn several things:
Since extensions augment existing websites, the best use case for them is in the context of redesigning an existing experience for the web. You should consider prototyping on web browser extensions if…
Web browser extensions can work in standard lab usability studies but their potential is best realized when users are allowed to install and utilize the prototypes on their own computers to augment their day to day lives.
Diary studies in which a group of users install a browser extension and provide qualitative feedback on their experience over a period of days or weeks allow designers to see what impact the design may have without making any underlying (and potentially expensive) changes to the website.
If this group of users is large & properly sampled, quantitative data can be utilized to compare the behaviors of users with the extension installed with those without it. While small change A/B experiments can be done without browser extensions for changes within a single design, extensions also can be used for observing macro behaviors in significantly different paradigms without having to build two entirely different websites.
Lastly, because browser extensions allow for the creation of a new UI layers in many places on the web, the modifications don’t have to be on a website you own. If there is a site that is similar enough to your own website, you can use it as your experimental testing ground for a user study. If you want to explore how design decisions would hypothetically impact a competitor to your site you can design such a study as well.
Partner with a developer who has built extensions in the past or learn to make your own! Learn more about how to build browser extensions that work on Google Chrome by following this link: https://developer.chrome.com/extensions/overview