http://www.brian-liang.com Brian Liang's Portfolio Mon, 25 Mar 2013 20:06:36 +0000 http://www.brian-liang.com en http://brian-liang.com/BLUR-Ubiquitous-Computing-project http://brian-liang.com/following/brian-liang.com/BLUR-Ubiquitous-Computing-project Mon, 25 Mar 2013 20:06:36 +0000 Brian Liang's Portfolio 5263594 Designers: Patty Peng, Brian Liang Date: 2012 <img src="http://payload148.cargocollective.com/1/4/134249/5263594/Screen shot 2013-03-25 at 11.46.32.png" width="670" height="271" width_o="1038" height_o="421" src_o="http://payload148.cargocollective.com/1/4/134249/5263594/Screen shot 2013-03-25 at 11.46.32_o.png" data-mid="28312833" border="0" align="left"/> As computational power becoming stronger, cheaper and smaller electronic components such as sensors, actuators, memory, wireless transmitters and receivers, batteries will increasingly be embedded in everyday products and environment. Naoto Fukasawa, one of my favorite designers, once mentioned that memory from childhood is an essential gateway to design experience. One example is that when Chinese recall their childhoods, it's a collective memory that most chinese parents keep their kids from reading books at least 1 inch height from the paper, or they will have to wear glasses for the rest of their lives. This is the starting point of the project. The design solution is to make texts blurred in the textbook when kids' eyes are too close to it. This could act as a deterrent for those putting their heads too close to books, and also a motivator to form a better reading behavior. The experiment utilized physical computing tools (e.g. Arduino and Processing) to embed in the environment mock-up. A "blur" script was written and tested to execute the appropriate function. <img src="http://payload148.cargocollective.com/1/4/134249/5263594/Screen shot 2013-03-25 at 09.11.02.png" width="670" height="395" width_o="1092" height_o="644" src_o="http://payload148.cargocollective.com/1/4/134249/5263594/Screen shot 2013-03-25 at 09.11.02_o.png" data-mid="28308387" border="0" align="left"/> <img src="http://payload148.cargocollective.com/1/4/134249/5263594/Screen shot 2013-03-25 at 09.00.41.png" width="670" height="411" width_o="1252" height_o="769" src_o="http://payload148.cargocollective.com/1/4/134249/5263594/Screen shot 2013-03-25 at 09.00.41_o.png" data-mid="28308013" border="0" align="left"/> Designers: Patty Peng, Brian Liang Date: 2012 As computational power becoming stronger, cheaper and smaller electronic components such as sensors, actuators,... http://brian-liang.com/Work-Samples-Siemens http://brian-liang.com/following/brian-liang.com/Work-Samples-Siemens Mon, 18 Mar 2013 23:51:30 +0000 Brian Liang's Portfolio 4908365 <img src="http://payload130.cargocollective.com/1/4/134249/4908365/Untitled-1.jpg" width="670" height="965" width_o="2048" height_o="2951" src_o="http://payload130.cargocollective.com/1/4/134249/4908365/Untitled-1_o.jpg" data-mid="26254427" border="0" align="left"/> All photo credits: Siemens AG All photo credits: Siemens AG http://brian-liang.com/WolframAlpha-exercise http://brian-liang.com/following/brian-liang.com/WolframAlpha-exercise Tue, 14 Aug 2012 23:04:11 +0000 Brian Liang's Portfolio 3917566 The project started at looking into the user experience problems of Wolfram|Alpha, and proposed several solutions to improve the UX of the website. The interaction in Wolfram|Alpha mainly focuses on two pages: the landing page and the result page. "Search->look into result->search again->look into result->search again->…" - such sequential activity is the most typical interaction when using this computational engine. One problem was that: unlike "Google search" which separates the search results into several pages, the Wolfram|Alpha sometimes returns a long list of result in the current page. Users need to scroll back a long way to the top of page to find the search bar and enter a new query again. This makes the main interaction clumsy especially when users have several modified queries to enter each time. Two solutions were provided as follows. <img src="http://payload80.cargocollective.com/1/4/134249/3917566/Screen shot 2012-08-15 at 01.12.36.png" width="82" height="20" width_o="82" height_o="20" src_o="http://payload80.cargocollective.com/1/4/134249/3917566/Screen shot 2012-08-15 at 01.12.36_o.png" data-mid="20461433" border="0" align="left"/> <img src="http://payload80.cargocollective.com/1/4/134249/3917566/01.png" width="670" height="467" width_o="755" height_o="527" src_o="http://payload80.cargocollective.com/1/4/134249/3917566/01_o.png" data-mid="20461375" border="0" align="left"/> <img src="http://payload80.cargocollective.com/1/4/134249/3917566/02.jpg" width="670" height="549" width_o="2048" height_o="1679" src_o="http://payload80.cargocollective.com/1/4/134249/3917566/02_o.jpg" data-mid="20461377" border="0" align="left"/> <img src="http://payload80.cargocollective.com/1/4/134249/3917566/Screen shot 2012-08-15 at 01.12.51.png" width="84" height="21" width_o="84" height_o="21" src_o="http://payload80.cargocollective.com/1/4/134249/3917566/Screen shot 2012-08-15 at 01.12.51_o.png" data-mid="20461434" border="0" align="left"/> <img src="http://payload80.cargocollective.com/1/4/134249/3917566/04.png" width="670" height="433" width_o="806" height_o="521" src_o="http://payload80.cargocollective.com/1/4/134249/3917566/04_o.png" data-mid="20461379" border="0" align="left"/> <img src="http://payload80.cargocollective.com/1/4/134249/3917566/03.jpg" width="670" height="476" width_o="2048" height_o="1455" src_o="http://payload80.cargocollective.com/1/4/134249/3917566/03_o.jpg" data-mid="20461378" border="0" align="left"/> Please see the demo below: * DISCLAIMER: This individual project does not reflect any views or plans of Wolfram|Alpha, LLC. The project started at looking into the user experience problems of Wolfram|Alpha, and proposed several solutions to improve the UX of the website. The interaction... http://brian-liang.com/Grocery-Data http://brian-liang.com/following/brian-liang.com/Grocery-Data Fri, 10 Aug 2012 00:02:06 +0000 Brian Liang's Portfolio 3893857 Imagine a large grocery chain gave you access to the anonymized purchase history of all its customers. The user experience design is for the retailer to explore this data, discover insights, and apply them to make their business more profitable and their customers happier. ============================================================================ The goal is to design a smarter system that learns from the purchase history of the pass, to help retailer make smarter decision in the future. The initial thoughts for the system is shown as follows: <img src="http://payload79.cargocollective.com/1/4/134249/3893857/1.png" width="197" height="323" width_o="197" height_o="323" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/1_o.png" data-mid="20325470" border="0" align="left"/> Insights come from learning the provided conclusions, and conclusions come from comparisons. When designing the system to analysis or compare different objects, several parameters should be taken into consideration. They are: - Time: should be able to measure during a certain timeframe - Area information: scalable from to a single store, to a big area (e.g. state) - Customer information: including age, gender, shopping times, money spent… - Product information: brands, price, discounts, profits, calories, <img src="http://payload79.cargocollective.com/1/4/134249/3893857/2.png" width="77" height="20" width_o="77" height_o="20" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/2_o.png" data-mid="20325471" border="0" align="left"/> If there is a formula to summarize the main functionality of the system, it would be: <img src="http://payload79.cargocollective.com/1/4/134249/3893857/3.png" width="670" height="191" width_o="824" height_o="236" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/3_o.png" data-mid="20325472" border="0" align="left"/> <img src="http://payload79.cargocollective.com/1/4/134249/3893857/4.png" width="74" height="25" width_o="74" height_o="25" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/4_o.png" data-mid="20325473" border="0" align="left"/> The following image is the site-map for the intended system. <img src="http://payload79.cargocollective.com/1/4/134249/3893857/5.png" width="670" height="415" width_o="738" height_o="458" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/5_o.png" data-mid="20325474" border="0" align="left"/> <img src="http://payload79.cargocollective.com/1/4/134249/3893857/6.png" width="106" height="26" width_o="106" height_o="26" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/6_o.png" data-mid="20325476" border="0" align="left"/> "Log-in" Page <img src="http://payload79.cargocollective.com/1/4/134249/3893857/7.png" width="670" height="236" width_o="905" height_o="320" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/7_o.png" data-mid="20325478" border="0" align="left"/> "Map" Page. <img src="http://payload79.cargocollective.com/1/4/134249/3893857/8.png" width="670" height="476" width_o="735" height_o="523" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/8_o.png" data-mid="20325479" border="0" align="left"/> "Specific Area" Page (slides in when an "area" is clicked). <img src="http://payload79.cargocollective.com/1/4/134249/3893857/9.png" width="670" height="477" width_o="736" height_o="524" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/9_o.png" data-mid="20325481" border="0" align="left"/> "Customers" Page. <img src="http://payload79.cargocollective.com/1/4/134249/3893857/10.png" width="670" height="476" width_o="736" height_o="523" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/10_o.png" data-mid="20325482" border="0" align="left"/> "Specific Customer" Page under the table view. (slides in when a customer is clicked). <img src="http://payload79.cargocollective.com/1/4/134249/3893857/11.png" width="670" height="475" width_o="737" height_o="523" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/11_o.png" data-mid="20325485" border="0" align="left"/> "Specific Customer" Page (under the graph view). <img src="http://payload79.cargocollective.com/1/4/134249/3893857/12.png" width="670" height="476" width_o="736" height_o="523" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/12_o.png" data-mid="20325487" border="0" align="left"/> "Products" Page (under the "table" view). <img src="http://payload79.cargocollective.com/1/4/134249/3893857/13.png" width="670" height="475" width_o="737" height_o="523" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/13_o.png" data-mid="20325489" border="0" align="left"/> "Specific Product" Page. (slides in when an item is clicked) <img src="http://payload79.cargocollective.com/1/4/134249/3893857/14.png" width="670" height="474" width_o="738" height_o="523" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/14_o.png" data-mid="20325490" border="0" align="left"/> <img src="http://payload79.cargocollective.com/1/4/134249/3893857/15.png" width="168" height="24" width_o="168" height_o="24" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/15_o.png" data-mid="20325493" border="0" align="left"/> The high-fidelity example showcased in the following is from the product page (graph view). The interactions are: 1. In the "Products" pages, choose the Graph view. 2. in the right-side widget, select "Diary" and "Snack" under "categories". 3. At the same time inside the right-side widget, two pie-charts appear (The green one is the is the snack, and the blue one is the dairy). The pie-chart is divided into several categories. 4. Click one pie of the chart, a roll will expand with the a bar-chart on it, showing top 10 sales of the selected category. <img src="http://payload79.cargocollective.com/1/4/134249/3893857/16.jpg" width="670" height="1353" width_o="905" height_o="1828" src_o="http://payload79.cargocollective.com/1/4/134249/3893857/16_o.jpg" data-mid="20325494" border="0" align="left"/> Imagine a large grocery chain gave you access to the anonymized purchase history of all its customers. The user experience design is for the retailer to explore... http://brian-liang.com/LEAF-O-1 http://brian-liang.com/following/brian-liang.com/LEAF-O-1 Wed, 13 Jun 2012 15:06:19 +0000 Brian Liang's Portfolio 3341406 Date: November, 2011 Let us say you have bought a new DVD Player and you are pretty excited to watch a movie. When you find the right one and sit to watch it, you get a sudden deluge of options on your DVD Remote when all you need to do is press the PLAY button. But there are over 40 buttons on the remote and it takes me nearly a minute to search and find the PLAY button. So, do we really need all that clutter? Do we always have to live in a world filled with so many features that we forget what is important to us? This project is aiming to propose a better user experience in terms of watching TV. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/00.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/00_o.jpg" data-mid="17159878" border="0" align="left"/> <img src="http://payload52.cargocollective.com/1/4/134249/3341406/01.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/01_o.jpg" data-mid="17159883" border="0" align="left"/> In order to find out the problems from the experience of watching TV, self-observation and usability test were conducted. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/02.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/02_o.jpg" data-mid="17159911" border="0" align="left"/> We outlined the framework of each button's function and the connections between them in the purpose of understanding the existing remotes elements and their functions. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/03.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/03_o.jpg" data-mid="17159930" border="0" align="left"/> In order to design a simple navigation, we started to learn about the information hierarchy from existing tv interface and analyze them. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/04.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/04_o.jpg" data-mid="17159935" border="0" align="left"/> The goal is to provide a simple, yet sophisticated user experience comprised of modern typography, interactive features and social elements. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/05.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/05_o.jpg" data-mid="17159936" border="0" align="left"/> The final design involved both remote design and TV interface design. The relationship between the physical object and the digital contents are intended to be perfectly fit to each other. And the interaction among them should be functionally intuitive and required minimal effort to master. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/06.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/06_o.jpg" data-mid="17159977" border="0" align="left"/> This is the manual of the remote. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/07.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/07_o.jpg" data-mid="17160245" border="0" align="left"/> Interacting with the remote is intuitive because it meets the fisheye interface design on the screen. One example of how it works is explained in the "Key Stage". <img src="http://payload52.cargocollective.com/1/4/134249/3341406/09.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/09_o.jpg" data-mid="17160021" border="0" align="left"/> The physical model was developed to fit people's hands. Manipulating with all the keys on the remote should be easy and comfortable. <img src="http://payload52.cargocollective.com/1/4/134249/3341406/08.jpg" width="670" height="426" width_o="2048" height_o="1303" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/08_o.jpg" data-mid="17159987" border="0" align="left"/> <img src="http://payload52.cargocollective.com/1/4/134249/3341406/1.png" width="670" height="471" width_o="2048" height_o="1440" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/1_o.png" data-mid="21737125" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/2.png" width="670" height="471" width_o="2048" height_o="1440" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/2_o.png" data-mid="21737138" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/3.png" width="670" height="471" width_o="2048" height_o="1440" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/3_o.png" data-mid="21737151" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/4.jpg" width="670" height="471" width_o="2048" height_o="1440" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/4_o.jpg" data-mid="21737158" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/5.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/5_o.png" data-mid="21737171" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/6.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/6_o.png" data-mid="21737177" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/7.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/7_o.png" data-mid="21737203" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/8.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/8_o.png" data-mid="21737227" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/9.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/9_o.png" data-mid="21737235" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/10.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/10_o.png" data-mid="21737247" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/11.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/11_o.png" data-mid="21737258" border="0" align="left"/><img src="http://payload52.cargocollective.com/1/4/134249/3341406/12.png" width="670" height="443" width_o="2048" height_o="1355" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/12_o.png" data-mid="21737287" border="0" align="left"/> <img src="http://payload52.cargocollective.com/1/4/134249/3341406/10.jpg" width="670" height="406" width_o="2048" height_o="1243" src_o="http://payload52.cargocollective.com/1/4/134249/3341406/10_o.jpg" data-mid="22590099" border="0" align="left"/> The usability testing started when we were in the wireframe phase and also for the last round during the first iteration. We had 3 users to test the prototype and provide feedback on the experience by using it. Some feedbacks are: - A long path or too much steps when switching from one item in one category to another item in another category. - The font is not easy to recognize. - Maybe use the same interface on iPad, and discard the remote. Date: November, 2011 Let us say you have bought a new DVD Player and you are pretty excited to watch a movie. When you find the right one and sit to watch it, you... http://brian-liang.com/Flight-Courier-Game-Design http://brian-liang.com/following/brian-liang.com/Flight-Courier-Game-Design Tue, 08 May 2012 18:03:40 +0000 Brian Liang's Portfolio 3366893 Course: Info403a - Virtual Game Design Team: Hyun Joon Kim (Computer Science), Tianyi Wang (Computer Science) and Joe Wrenn(Computer Science), Brian Liang (Industrial Design), Diane Park (Graphic Design), Kyle O’Connell (Architecture Design) and Kelly Delahanty (Media Arts). Software: Unity Dates: May, 2012 INTRODUCTION Our Game is Flight Courier. In Flight Courier you play as a humble mail courier in a world made up of floating islands. You navigate the world via an aircraft and find different packages to deliver to people. In the final version of the game you would also find yourself navigating the political minefield between the government and the rebels. GAME STORY OUTLINE <img src="http://payload53.cargocollective.com/1/4/134249/3366893/storyOutlineDraft1.jpg" width="670" height="372" width_o="1800" height_o="1000" src_o="http://payload53.cargocollective.com/1/4/134249/3366893/storyOutlineDraft1_o.jpg" data-mid="17301865" border="0" align="left"/> GAMEPLAY There are two different gameplay modes: on-the-ground and in-flight. On-the-ground play will happen in different villages, where you are free to explore on foot. You will have to find the NPCs you need to talk to get and deliver your package while on foot. In the extended version you would be able to do other things as well, such as locate objects, solve puzzles and buy things from different shops. On-the-ground game play will operate like a standard 3rd person control system. You will be able to talk to NPCs and occasionally pick up items. In-flight game play will be a bit more varied. In the extended version there would be different aircrafts that will change how you’re able to navigate the space. The different flight vehicles will limit you and enhance different areas of performance. In the prototype there is one aircraft which has a weapon you can use to defeat enemies like birds and sky pirates. There will be other obstacles besides enemies, such as wind and rocks that you’ll need to avoid. You’ll also have to avoid flying to low, lest you be swallowed by a sea monster. <img src="http://payload53.cargocollective.com/1/4/134249/3366893/bbb.jpg" width="670" height="360" width_o="1366" height_o="736" src_o="http://payload53.cargocollective.com/1/4/134249/3366893/bbb_o.jpg" data-mid="17301835" border="0" align="left"/><img src="http://payload53.cargocollective.com/1/4/134249/3366893/unity_update.png" width="670" height="376" width_o="1366" height_o="768" src_o="http://payload53.cargocollective.com/1/4/134249/3366893/unity_update_o.png" data-mid="17301868" border="0" align="left"/><img src="http://payload53.cargocollective.com/1/4/134249/3366893/unity_update2.png" width="670" height="376" width_o="1366" height_o="768" src_o="http://payload53.cargocollective.com/1/4/134249/3366893/unity_update2_o.png" data-mid="17301894" border="0" align="left"/><img src="http://payload53.cargocollective.com/1/4/134249/3366893/Screen shot 2012-04-04 at --12.48.12.png" width="670" height="420" width_o="909" height_o="570" src_o="http://payload53.cargocollective.com/1/4/134249/3366893/Screen shot 2012-04-04 at --12.48.12_o.png" data-mid="17301862" border="0" align="left"/><img src="http://payload53.cargocollective.com/1/4/134249/3366893/CONTROLS.gif" width="670" height="375" width_o="1590" height_o="890" src_o="http://payload53.cargocollective.com/1/4/134249/3366893/CONTROLS_o.gif" data-mid="17301858" border="0" align="left"/> [Please do not reproduce in any form or post on blogs without the expressed written consent from Brian Liang.] ← Back Course: Info403a - Virtual Game Design Team: Hyun Joon Kim (Computer Science), Tianyi Wang (Computer Science) and Joe Wrenn(Computer Science), Brian Liang... http://brian-liang.com/Data-Visualization-in-HCI http://brian-liang.com/following/brian-liang.com/Data-Visualization-in-HCI Tue, 10 Apr 2012 03:12:06 +0000 Brian Liang's Portfolio 3173421 Course: CS565 - Topics in Human Computer Interaction Advisor: Dr. Brian Bailey Other teammates: Casey Hanson(Computer Science), Niraj Chubal(Computer Science) Dates: May, 2012 Download the paper here: Redundancy Analysis and Visualization of Idea Clusters in a User Innovation Community.pdf <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-05-10 at 09.39.48.png" width="634" height="720" width_o="634" height_o="720" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-05-10 at 09.39.48_o.png" data-mid="17368293" border="0" align="left"/> There're more than 150k ideas in the database of http://mystarbucksidea.force.com. Among these abundant data, a lot ideas are redundant or similar to each other to a certain degree (e.g. idea of "add pumpkin spice to the menu" is similar to "please serve pumpkin spice latte during winter"), which is not healthy for the database. Thus, we want to cluster the similar ideas in the database, and we also believe displaying the visualization to users could act as a deterrent or motivator for users contributing unique ideas, but not ideas already existing on the website. The other two computer science students developed a clustering tool (an algorithm method) to analyze the similar ideas from a sample corpus (Coffee and Espresso drink section) from the website. Based on their result, my role was to propose a number of visualization techniques that could be integrated directly into the website for the purposes of viewing the redundancy. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-08-23 at 01.35.22.png" width="670" height="376" width_o="1204" height_o="677" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-08-23 at 01.35.22_o.png" data-mid="20708685" border="0" align="left"/> Our team conducted both computational and manual techniques to analyze the redundancy of the ideas from a sample corpus from the "Coffee and Expresso drink" section and constructed a similarity. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-08-23 at 01.35.48.png" width="670" height="363" width_o="1096" height_o="594" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-08-23 at 01.35.48_o.png" data-mid="20708689" border="0" align="left"/> - Like most data visualization designs, the goal is to provide clarity to data that the data alone can’t provide. It provides opportunity to explore data by providing context and focus. The context, in this case, is the form of copious ideas from users. Focus is afforded by allowing to see the similarity of the these ideas under parameters like "time period", "how popular the idea is", "ideas categories", etc. I proposed and explained differences between a few of the most relevant visualization approaches, as well as if any custom augmentations could be provided to enhance their effectiveness. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2013-01-20 at 08.12.28.png" width="670" height="364" width_o="1230" height_o="669" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2013-01-20 at 08.12.28_o.png" data-mid="25688188" border="0" align="left"/> <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2013-01-20 at 08.12.39.png" width="670" height="357" width_o="1253" height_o="668" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2013-01-20 at 08.12.39_o.png" data-mid="25690081" border="0" align="left"/> Given the results of the annotation analysis, we deconstructed the redundancy visualization into four prime areas. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-04-10 at 08.52.22.png" width="670" height="476" width_o="1100" height_o="782" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-04-10 at 08.52.22_o.png" data-mid="16268223" border="0" align="left"/> (1) The first visualization corresponds to visualizing the number and degree of related ideas to a given idea. This proposal consists of a radial view, similar to radar, pulled out from the side of the screen.The middle of the radar represents the idea; the circle representing the radar is subdivided into multiple equal sized pieces, each presenting a particular temporal period (such as a month). A slider along the edge of the radar allows for smooth transitioning between selections of temporal periods. Within each period, are a set of circles representing related ideas posted in that given month. The distance from the middle of the circle represents the degree of separation in similarity of the idea away from the central idea. This design correlates with the findings of related research which suggest that the spatial positioning of information is more informative than color coding. Nevertheless, in this design, the user has a visual means by which to observe related ideas, both across similarity and time. Additionally, clicking on any idea brings a pop-up window representing the related idea, bringing more fluidity to the interface. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-04-26 at 08.38.37.png" width="670" height="467" width_o="1140" height_o="795" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-04-26 at 08.38.37_o.png" data-mid="17160504" border="0" align="left"/> (2) The second visualization is in the same page, which locates underneath the selected idea. There is a vertical bar with two sliders on the left for users to filter linked ideas based on the percentage of similarity. The existing design of this website page is showing a long list of static suggestions, which will overload users perceptions. With the new design, users can customize the similarity and the number of ideas listed on the right side. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-05-08 at 04.47.14.png" width="670" height="290" width_o="951" height_o="412" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-05-08 at 04.47.14_o.png" data-mid="17300733" border="0" align="left"/> (3) Instead of the static banner on the main page, we decided to switch it into a dynamic one for the reason that users have more options for different purposes. In this visualization, it displays three different graphs with specific functions. For example, on the right-top one, ideas are depicted as nodes, and linear lines are connected between them to suggest the relationship map of ideas. In addition, the right-bottom graph enables users to compare the ideas’ ratings aggregated by different users. <img src="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-05-08 at 02.16.04.png" width="670" height="517" width_o="727" height_o="562" src_o="http://payload43.cargocollective.com/1/4/134249/3173421/Screen shot 2012-05-08 at 02.16.04_o.png" data-mid="17300732" border="0" align="left"/> (4) The fourth visualization focuses on reflecting the health of community in order to raise the awareness of users before they type in any ideas. It is placed on the main page where users can easily notice. Both of these two views are divided into the newest 12 months around the circle. The green one represents the total number of redundant ideas each month, while the blue one suggests the percentage of redundant ideas within a month or within a year. After the visualization works, we thought about how they could be employed in the existing website (http://mystarbucksidea.force.com/) as an integrity seamlessly and interactively. Please view the following video to see the integrated outcome: [Please do not reproduce in any form or post on blogs without the expressed written consent from Brian Liang.] ← Back Course: CS565 - Topics in Human Computer Interaction Advisor: Dr. Brian Bailey Other teammates: Casey Hanson(Computer Science), Niraj Chubal(Computer Science)... http://brian-liang.com/Zero-Percent-Application http://brian-liang.com/following/brian-liang.com/Zero-Percent-Application Wed, 15 Feb 2012 21:53:17 +0000 Brian Liang's Portfolio 2818763 [The project is still in progress... More content will come out soon.] Check out more information about Zero Percent here: http://zeropercent.us/info.jsp <img src="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-25 at 10.14.12.png" width="670" height="433" width_o="1228" height_o="794" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-25 at 10.14.12_o.png" data-mid="14660970" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-15 at 09.41.54.png" width="670" height="105" width_o="714" height_o="112" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-15 at 09.41.54_o.png" data-mid="14316372" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-15 at 09.41.37.png" width="670" height="386" width_o="716" height_o="413" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-15 at 09.41.37_o.png" data-mid="14316433" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/DSC_0179 copy.jpg" width="670" height="389" width_o="2048" height_o="1189" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/DSC_0179 copy_o.jpg" data-mid="14439849" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2013-01-24 at 10.25.39.png" width="670" height="458" width_o="998" height_o="683" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2013-01-24 at 10.25.39_o.png" data-mid="25875372" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/1.png" width="218" height="395" width_o="218" height_o="395" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/1_o.png" data-mid="25742741" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/2.png" width="217" height="395" width_o="217" height_o="395" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/2_o.png" data-mid="25742742" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/3.png" width="219" height="395" width_o="219" height_o="395" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/3_o.png" data-mid="25742743" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/4.png" width="219" height="397" width_o="219" height_o="397" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/4_o.png" data-mid="25742745" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/5.png" width="221" height="399" width_o="221" height_o="399" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/5_o.png" data-mid="25742746" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/6.png" width="223" height="400" width_o="223" height_o="400" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/6_o.png" data-mid="25742747" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/7.png" width="224" height="399" width_o="224" height_o="399" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/7_o.png" data-mid="25742748" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/8.png" width="225" height="401" width_o="225" height_o="401" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/8_o.png" data-mid="25742749" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/9.png" width="225" height="401" width_o="225" height_o="401" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/9_o.png" data-mid="25742750" border="0" align="left"/><img src="http://payload25.cargocollective.com/1/4/134249/2818763/10.png" width="223" height="402" width_o="223" height_o="402" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/10_o.png" data-mid="25742751" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/engagement_iphone.jpg" width="670" height="385" width_o="1008" height_o="580" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/engagement_iphone_o.jpg" data-mid="14660825" border="0" align="left"/> <img src="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-25 at 09.23.45.png" width="670" height="482" width_o="1061" height_o="764" src_o="http://payload25.cargocollective.com/1/4/134249/2818763/Screen shot 2012-02-25 at 09.23.45_o.png" data-mid="14660097" border="0" align="left"/> [Please do not reproduce in any form or post on blogs without the expressed written consent from Brian Liang.] [The project is still in progress... More content will come out soon.] Check out more information about Zero Percent here: http://zeropercent.us/info.jsp ... http://brian-liang.com/Motion-Based-Interaction-in-Product-Design http://brian-liang.com/following/brian-liang.com/Motion-Based-Interaction-in-Product-Design Wed, 11 Jan 2012 01:27:12 +0000 Brian Liang's Portfolio 2584537 Problem Definition: • (1) The consideration of movements in interaction is a frequently overlooked step in the design process. Even a smallest difference can convey a completely different message. For example, when you are passing the McDonald Drive Thru, or when you are being served in a France fine dining restaurant, the waiters deliver foods to you with different motions, which could cause completely different experience for you (Shown in the following video). Rather than looking at success of a product design as being financial successful or functionally useful, a success design could be evaluated by its interaction and how user perceived from it. Movements take an important place in generating such experience. • (2) There's no such a formally effective guideline in such aspect. For traditional elements like color and shape, there are plenty of guidelines. Designers need some formal guidelines to help them designing the intended movement. Objective: As shown in the following pics, my contribution in this paper have been proposed a formal consideration of motion-based interaction: • (1) The framework to analysis and describe the movement; • (2) The methodology to design movement; and • (3) How to adopt this framework and design methodology into a design project. <img src="http://payload14.cargocollective.com/1/4/134249/2584537/conclusion.jpg" width="670" height="418" width_o="2048" height_o="1277" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/conclusion_o.jpg" data-mid="16810553" border="0" align="left"/> ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- FRAMEWORK IN MOTION DESIGN <img src="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.57.40.png" width="670" height="399" width_o="838" height_o="500" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.57.40_o.png" data-mid="16810598" border="0" align="left"/> ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- METHODOLOGY IN DESIGNING MOTION INTERACTION <img src="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.57.49.png" width="670" height="366" width_o="774" height_o="423" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.57.49_o.png" data-mid="16810614" border="0" align="left"/> <img src="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.59.53.png" width="670" height="426" width_o="821" height_o="523" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.59.53_o.png" data-mid="16810623" border="0" align="left"/><img src="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.59.44.png" width="670" height="370" width_o="1008" height_o="558" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.59.44_o.png" data-mid="16810632" border="0" align="left"/><img src="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.59.48.png" width="670" height="352" width_o="975" height_o="513" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.59.48_o.png" data-mid="16810641" border="0" align="left"/> <img src="http://payload14.cargocollective.com/1/4/134249/2584537/try.jpg" width="670" height="1155" width_o="2375" height_o="4096" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/try_o.jpg" data-mid="15861492" border="0" align="left"/> <img src="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.58.23.png" width="670" height="376" width_o="1006" height_o="565" src_o="http://payload14.cargocollective.com/1/4/134249/2584537/Screen shot 2012-04-25 at 01.58.23_o.png" data-mid="16810576" border="0" align="left"/> Problem Definition: • (1) The consideration of movements in interaction is a frequently overlooked step in the design process. Even a smallest difference can... http://brian-liang.com/Purity-interaction-off-the-glass http://brian-liang.com/following/brian-liang.com/Purity-interaction-off-the-glass Sat, 01 Oct 2011 22:12:59 +0000 Brian Liang's Portfolio 2086493 by Brian Liang Advisors: Sean Su (Senior Design Manager, Chunwei-sean.su@nokia.com), Jingchao Yang Thanks to: Yi Liu (Photography) Date: 3 months, 2011 This is an internship project in Nokia Design Center (at Nokia Research Center, Asian Pacific), exploring the next generation of Nokia mobile phone. I developed a deliberate concept which marries the world of the conscious and even subconscious human gesture with world of advanced mobile technology. The goal is to design a phone with a purely simple form, and even with simple experience and tangible interaction. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.36.32.png" width="670" height="274" width_o="797" height_o="327" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.36.32_o.png" data-mid="13062448" border="0" align="left"/> • It took three weeks on researching on consumer trends, design trends, and technology trends before getting the result of design opportunities. Structural analysis method was taken apart in this effort. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2011-10-01 at 11.24.44.png" width="670" height="363" width_o="763" height_o="414" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2011-10-01 at 11.24.44_o.png" data-mid="10394305" border="0" align="left"/> • At the beginning, I started building user scenarios, with 8 scenarios from “Togetherness”, 11 scenarios from “Simplicity”, and 3 scenarios from “Happiness". Download Research Document Here: Scenario Research Document.xlsx <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2011-10-01 at 11.23.17.png" width="670" height="335" width_o="1083" height_o="542" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2011-10-01 at 11.23.17_o.png" data-mid="10394297" border="0" align="left"/> • Then a workshop was held to evaluate user experience based on criteria like “Is the solution feasible in the coming years, or even now?”, or “Is it urgent or valuable to solve this problem for the phone users?". <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-08-23 at 01.36.33.png" width="670" height="359" width_o="1209" height_o="649" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-08-23 at 01.36.33_o.png" data-mid="20708538" border="0" align="left"/> • I started to look into what gestures are interesting and intuitive, and thought about "What gestures could be employed to the interaction of a mobile phone?" Here are some daliy-life human gestures associated with meanings. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.47.03.png" width="670" height="270" width_o="769" height_o="310" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.47.03_o.png" data-mid="13062617" border="0" align="left"/> • The left slide shows the evolution of the mobile phone and which function keys have been discarded during the phone history. • The right slide compares the existing function keys between Iphone and HTC-G10, aiming to see what they have in common, what is the crucial function that can not be discarded so far, and what could be replaced. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-14 at 04.43.07.png" width="670" height="211" width_o="1096" height_o="346" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-14 at 04.43.07_o.png" data-mid="13184627" border="0" align="left"/> • The left slide shows there are 5 processes to find Wifi in Iphone: Slide to unlock -> Find the system app (waste too much time on this) -> choose “Wi-Fi” -> Select the available network -> type in password • The right slide: The symmetric interaction is important for users to recognize, and to discover the function especially it’s the first time the use the phone. If the manipulate of the interaction in the phone is not symmetric, it can easily confuse users. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2011-10-02 at 11.27.25.png" width="670" height="386" width_o="864" height_o="499" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2011-10-02 at 11.27.25_o.png" data-mid="10401911" border="0" align="left"/> [------------------------------------------------------- FINAL RESULT -------------------------------------------------------] <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.08.03.png" width="670" height="360" width_o="686" height_o="369" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.08.03_o.png" data-mid="13063010" border="0" align="left"/> <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.55.46.png" width="670" height="263" width_o="890" height_o="350" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.55.46_o.png" data-mid="13062848" border="0" align="left"/> • I developed this idea because this This gesture is like squeezing a lemon. After you squeeze the lemon, you can get a full glass of lemonade. • Some people might think: this power on/off functionality associated with this “squeezing” gesture is very easily activated by the user’s everyday movement. You might think, for example, If you put the phone under your hip, it will be easily shut down. Actually, it is not. • Look at red dots. It shows the process how it works. First, after the yellow part of the phone gains pressure, the phone will be activated, but not totally activated. It activates to see if there is some electricity on the screen. Secondly, If you put your finger on the top the screen, it provides electricity to the screen. After 2 seconds, the power on UI on the screen will display like you are pouring a glass of lemonade. • In a word, it gives double insurance for this gesture. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.53.12.png" width="670" height="246" width_o="866" height_o="318" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 12.53.12_o.png" data-mid="13062815" border="0" align="left"/> • I get the idea from the word “Frequency”. When you want your phone be connected with the other, You just need to wave your phone like a teeterboard. You wave from slowly to quickly until get the same frequency of your phone to the phone besides yours. And then, you two get connected. Benefited from the NCF technology, we can be definitely accomplish that.. The same situation when you are docking to your PC. • It is a fun too. You can play with your phone physically, but not just the content in the screen. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.14.57.png" width="670" height="231" width_o="996" height_o="344" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.14.57_o.png" data-mid="13063078" border="0" align="left"/> • Consider these two situations: One is that you are answering a call with the other side of the phone is in a meeting room. The guy who are talking to you is speaking so slightly. What would you do unconsciously? Look at the left picture. You can’t help to answer a phone like this. You might be pressing the upper part of your phone on your ear as hard as you can. • Another situation is that the guy who are talking to you is in a market place, and his voice is just like a thunder. And you will unconsciously avoid listen to him directly. Look at picture on the right. You are highly likely answering like this. You keep upper part of your phone to a certain distance from your ear. • With this, you don’t need learn anything. You don’t need to awkwardly press any button when you answering on a phone. You don’t need to make any efforts finding where is the Volume Up key, or something like this. Everything you do is just from an unconscious action. It just happens. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.21.26.png" width="670" height="337" width_o="817" height_o="411" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.21.26_o.png" data-mid="13063193" border="0" align="left"/> <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.19.24.png" width="670" height="460" width_o="1019" height_o="700" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.19.24_o.png" data-mid="13063156" border="0" align="left"/> • In this design, the camera is placed in right up edge of the phone, and it can be twisted around. The camera is made of black aluminum, so when it is smooth out on the phone, it looks like the similar martial from the black glass screen on the top. • Now you can enjoy taking shots or can have family video calling just in one integrated camera, just by quickly flipping over the camera. What’s important is that when taking a self picture, now you don’t need to afraid it will sacrifice the quality of the image. It can be both 7 mega pixels either in the front and in the back. <img src="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.24.50.png" width="670" height="518" width_o="823" height_o="637" src_o="http://payload.cargocollective.com/1/4/134249/2086493/Screen shot 2012-01-11 at 01.24.50_o.png" data-mid="13063279" border="0" align="left"/> • Swipe from bottom/top of the screen to the top/bottom vertically and constantly. • Locking the screen is a metaphor of “close your eyes” from daily gesture. • Similarly, unlocking the screen is a metaphor of “open your eyes.” [Please do not reproduce in any form or post on blogs without the expressed written consent from Brian Liang.] ← Back by Brian Liang Advisors: Sean Su (Senior Design Manager, Chunwei-sean.su@nokia.com), Jingchao Yang Thanks to: Yi Liu (Photography) Date: 3 months, 2011 This is an...