tag:blogger.com,1999:blog-77279465961128804132024-02-07T07:50:31.889-08:00Design SnapshotsSharing thoughts on interesting design solutions I stumbled uponAnonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.comBlogger35125tag:blogger.com,1999:blog-7727946596112880413.post-5394309346636828562012-10-27T17:14:00.003-07:002012-10-28T18:32:29.060-07:00My First Day with Microsoft SurfaceA few months ago I saw the unveiling of Microsoft Surface. My first though was: I want it! My second was: Microsoft has finally a compelling vision for the future.
On October 16 I received an email, announcing that the tablet was available for preorder. I rushed to the ordering site, mildly disappointed by the options: the 64G model, with a boring black cover, or the 32G model, with a separate colored cover. I really wanted the 64G model, but I couldn't bear myself to get a boring black cover. Dear Microsoft, why didn't you let me order the more expensive model with a cover of my choice? Who was the marketing genius to propose this product strategy? I got over my frustration, and I placed an order for a 32G model, with a bright blue touch cover.
I spent the following 10 days refreshing the ordering page, hoping to see "Order in Process..." becoming "Order Completed".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0Rg9-J_PkdpPR1sLF6JNJp-wyWNRdFEVurEiUGtILqjg55wQlfZiUipC2nXw3c2eGWeowDZKxvEgnZNQO2VWG16e_7MSQrkVSAqgfygiHqaooAwPGulnp1LjXYb6nTCB9kKyLQuKHsY/s1600/surface.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0Rg9-J_PkdpPR1sLF6JNJp-wyWNRdFEVurEiUGtILqjg55wQlfZiUipC2nXw3c2eGWeowDZKxvEgnZNQO2VWG16e_7MSQrkVSAqgfygiHqaooAwPGulnp1LjXYb6nTCB9kKyLQuKHsY/s320/surface.jpg" width="320" /></a></div>
<br />
Yesterday I finally got my new Surface RT tablet.
The tablet comes in a long slide-in box, along with the power cable, and a small booklet, which I didn't bother to open.
In a separate box, I got my bright blue touch cover, which snaps to the Surface, making a satisfying clicking sound.
The tablet is slightly heavier than expected. The material and the shape feels ok, respect to my iPad 3. The screen is better than I expected. Bright and crisp. The tablet feels solid, and the angle of the kick-stand is just right.
<br />
I brought the tablet to work, showing it off during few meetings.
The setup, in my corporate network, was relatively effortless and, by 3PM, I could finally give some dedicated attention to my new toy.
<br />
At home, I showed it to my husband, David, which was very impressed by the device, and by Windows 8 new interface.
I had used this device for approximately 8 hours, and I like it more than expected.
The new Metro UI is just gorgeous. I love the clean, yet vibrant design. I also love many of the gestures and, just after few hours of continuous usage, I found myself trying them on my iPad. I like swiping from the right edge, to get access to the charms and to the global search. I like swiping from the left edge, to get access to all my open windows. I LOVE being able to close the current app by swiping top to bottom. During my iPad daily usage, I open many different apps, which consume memory and/or power. I find that closing these many apps is a very tedious task. <br />
The picture password is just brilliant. I selected my favorite picture and recorded gestures on part of the image that have significance for me. That is just beautiful. My 6 years old, was very excited realizing he could learn to login without help.
<br />
Uploading and downloading pictures to my Picasa site was almost unexpected on a tablet. I got so used to the frustration of not having access to the file system, that being able to manage my files felt almost like cheating.
<br />
Being able to use MS Office was also a great plus. I was able to write this blog entry using Word.<br />
Finally, did I mention that the keyboard has left-right navigation arrows? Placing your cursor in a precise text location is often a challenge on the iPad.<br />
A few months ago I was given an Android tablet, and I found the experience so frustrating that I sold the device after a couple of weeks. I was unsure how this new device would compare to my beloved iPad.
I am pleased to announce that not only does it compares well but it enables a wide range of tasks more comfortably and efficiently.
When I first played with Windows 8 a few months ago, I was very puzzled about the coexistence of Metro and Desktop mode. I now believe that the secret for success stands in the careful partition of functionality across the two modes. <br />
Metro is simple and beautiful. Applications are interactive, intuitive, extremely visual, and they manage data and files for you. No need to understand the file system.
But, if you do understand the file system, all the power that comes with it, switch to the Desktop mode when you need and everything is still there for you.<br />
Desktop mode looks and works better with large screens, keyboards and mouse. <br />
Metro mode looks and works best on tablets. <br />
Since these two modes are fairly different, switching among them is a bit jarring. It is important to keep the user in the same environment while performing his daily activity. Microsoft partitioned applications in work (Desktop), and entertainment (Metro). In case where the line got blurry, as for Explorer and OneNote, they wisely duplicated application in both modes.<br />
This partition is right on and this is the way I expect I will be using Microsoft Surface and Windows 8 in general.<br />
I will use my desktop PC when sitting at my desk and performing complex tasks, mostly in desktop mode. When attending meetings in the office and playing at home, I will use my tablet, in Metro mode most of the time.
<br />
Although I am very satisfied with my experience, the surface does look a bit like a v1 product, although an excellent v1. The lack of 3G/4G/LTE connection is probably the biggest shortcoming which will push me back to my beloved iPad when travelling.
Anonymoushttp://www.blogger.com/profile/15907838925607588503noreply@blogger.com2tag:blogger.com,1999:blog-7727946596112880413.post-90715903252587055022012-07-21T04:11:00.003-07:002012-07-21T04:26:30.763-07:00Follow Along TutorialsAdobe is experimenting with follow along tutorials making them integral part of the interface both on desktop and table applications. In Photoshop for iPad the landing page features a set of tutorials introducing to the main features of the application.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3Raa7wYoySb2DMJy5Y0Zdnd21OmZXUepN_Fk4KVk81VwgTql0l37piqC-MMfBcHn0ONLb0i1YSQdmA6DfTfIllkd7dwXM2ZBihQAbhSl85Mbzc7IImDooGYkvp9fM16BstlQ39i5YeI/s1600/IMAGE_D98482DF-B3B0-44F7-943B-BA536BCCB699.PNG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3Raa7wYoySb2DMJy5Y0Zdnd21OmZXUepN_Fk4KVk81VwgTql0l37piqC-MMfBcHn0ONLb0i1YSQdmA6DfTfIllkd7dwXM2ZBihQAbhSl85Mbzc7IImDooGYkvp9fM16BstlQ39i5YeI/s1600/IMAGE_D98482DF-B3B0-44F7-943B-BA536BCCB699.PNG" width="500" /></a>
<br />
<br />
I don't like reading help or documentation, and my style of learning, as the large majority of people, is more example based. Follow along tutorials are a very effective way to learn even the most complex tools.<br />
When a tutorial first introduces a feature it often point to its location in the interface.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4IgzK-qBOSYZlCysjJMewYmy8QDygjuek22a8v4vWBYLXGdpFryxUzuo7u8PcNgstFeZCIDddr74ZX2OnpgJx1ylXuoIh3Dc5tUmUzvpqOku_YXHK3OPvO4EeB6rgM5vLfTzO6yi0EyI/s1600/IMAGE_FA95CC8F-E81F-4129-9DE8-570EFC3EF0C8.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4IgzK-qBOSYZlCysjJMewYmy8QDygjuek22a8v4vWBYLXGdpFryxUzuo7u8PcNgstFeZCIDddr74ZX2OnpgJx1ylXuoIh3Dc5tUmUzvpqOku_YXHK3OPvO4EeB6rgM5vLfTzO6yi0EyI/s1600/IMAGE_FA95CC8F-E81F-4129-9DE8-570EFC3EF0C8.jpg" width="500" /></a>
<br />
<br />
On the iPad the screen is pretty limited, and Adobe was able to fit the entire UI required for the follow along tutorial in one narrow bar on the bottom. Relevant, but not essential information is displaying it in form or tips in the context of the specific step.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLeCjKBlrb5XMp4a_L313KtUFzJ4YZEjt6YXXN4kuAEQoK3b4XcNEyx8iFFgo4PwT5POuv_OSrfAdhRMFSSuTijncZ1OYuR6Z7iqcjWItufbdgTWraXLhlxAAVQhMj6HAV_wIKSihZauQ/s1600/IMAGE_AA5591F6-8FC8-4064-BD59-21B32C14D694.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLeCjKBlrb5XMp4a_L313KtUFzJ4YZEjt6YXXN4kuAEQoK3b4XcNEyx8iFFgo4PwT5POuv_OSrfAdhRMFSSuTijncZ1OYuR6Z7iqcjWItufbdgTWraXLhlxAAVQhMj6HAV_wIKSihZauQ/s1600/IMAGE_AA5591F6-8FC8-4064-BD59-21B32C14D694.jpg" width="500" /></a>
<br />
<br />
The bar on the bottom displays the current step, enable to jump to adjacent steps and provides the access to related tips.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiapAIjaMqixUNAACdXQHMhX0ub8oPSUvBHx0G9Ah36_9O8gE-5F9BPux3kw7KsyUvYOWwJbfrI9-Og5l07C1pKujTYiDUIKxTZZmm7HpvNgFtgZBymX-KVf2K-nrnSnb-JEfFKgrdw9ok/s1600/IMAGE_1AED121C-4D80-4881-9CBB-FA5A11D1C371.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiapAIjaMqixUNAACdXQHMhX0ub8oPSUvBHx0G9Ah36_9O8gE-5F9BPux3kw7KsyUvYOWwJbfrI9-Og5l07C1pKujTYiDUIKxTZZmm7HpvNgFtgZBymX-KVf2K-nrnSnb-JEfFKgrdw9ok/s1600/IMAGE_1AED121C-4D80-4881-9CBB-FA5A11D1C371.jpg" width="500" /></a>
<br />
<br />
Adobe adopts a similar strategy in one of its newest product: Edge. Edge is a tool for creating interactive motion content for the web using HTML5, CSS3, and JavaScript. The start-up page features the main tutorials.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghX6VWu33OpRPo4ARe-d3BbXC8O2ImalE8IKOTR0ZUqFxMOc9naXmTkcYQdRVhc5heRbEp5H-HkV1PKV_wF7LjL37WdWhkMu18W9FywX6qYkm_yznTIt1gB-f9MkU4hshJIiiI1ij5ZII/s1600/edge1.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghX6VWu33OpRPo4ARe-d3BbXC8O2ImalE8IKOTR0ZUqFxMOc9naXmTkcYQdRVhc5heRbEp5H-HkV1PKV_wF7LjL37WdWhkMu18W9FywX6qYkm_yznTIt1gB-f9MkU4hshJIiiI1ij5ZII/s1600/edge1.png" width="500" /></a>
<br />
<br />
After selecting a tutorial a Lessons panels appears on the right and it displays the follow along steps.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrxiql5jYSpoSHaP0qVMCN3knwBtsuULAwVZ57nXxHK9FJT8Vg4Y0VnLtI2pB2Z9WhovL-a3YctCxJZ26M9PIaM5OenfBfit4Z8ey39T5vgkBfG9RcjQpuMHJzLB2c_Y7jFylU6X4FbYM/s1600/edge2.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrxiql5jYSpoSHaP0qVMCN3knwBtsuULAwVZ57nXxHK9FJT8Vg4Y0VnLtI2pB2Z9WhovL-a3YctCxJZ26M9PIaM5OenfBfit4Z8ey39T5vgkBfG9RcjQpuMHJzLB2c_Y7jFylU6X4FbYM/s1600/edge2.png" width="500" /></a>
<br />
<br />
After completing a tutorial the panel displays the list of all tutorial, enabling the user to select the next one.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0rKHrHU0fG2vlT4Jlf0Ku8SmsdteBHrT0u2TaQyZ_N_w8NRaMAHeXthisXR934NrYfsK13akQmRZVcZkh51Sw3QXrT3DziMr0LuhLAa0qI9AIDBEePCQS2dTk-Fgr-EaMOo7VpN5PwY/s1600/edge3.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0rKHrHU0fG2vlT4Jlf0Ku8SmsdteBHrT0u2TaQyZ_N_w8NRaMAHeXthisXR934NrYfsK13akQmRZVcZkh51Sw3QXrT3DziMr0LuhLAa0qI9AIDBEePCQS2dTk-Fgr-EaMOo7VpN5PwY/s1600/edge3.png" width="500" /></a>
<br />
<br />
<span style="background-color: white;">Follow along tutorial is a very powerful and effective tool for many different types of applications.</span><br />
This approach can be applied to the more diverse problems. Below and example of this strategy applied to teaching a coding language.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJWftoRg7M19aEHq8wT18Msh6w9qXPYAFnSA3uAffYPJmK5JZzknWs8RrHUBQQezBmtDg1IFgV7YRs_heNi86ON-_duvJMs-ZSutKAUzLMlf62VxYHl94PyHs5gdlJIZ8muJ3L0fU1hqc/s1600/Fullscreen+capture+762012+24745+PM.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJWftoRg7M19aEHq8wT18Msh6w9qXPYAFnSA3uAffYPJmK5JZzknWs8RrHUBQQezBmtDg1IFgV7YRs_heNi86ON-_duvJMs-ZSutKAUzLMlf62VxYHl94PyHs5gdlJIZ8muJ3L0fU1hqc/s1600/Fullscreen+capture+762012+24745+PM.jpg" width="500" /></a>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-45844824080726274062012-07-13T03:07:00.000-07:002012-08-15T10:12:35.755-07:00Google Now on JellybeanWhat if a your phone could know where you are, what your interests are, when you have your next appointment, what time of the day is, and give you the right information just when you need it? This is what the new Google Now does.<br />
<br />
Let's assume you are commuting from or to home. Google Now tells you how long your usual commute is going to be and if there is a faster route.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7iVVxMlT71kP6lA1EOTfckXmpgTvi7zrHlWMFXDqTgim7uv_q2XxefZSqJxBUnGhk03C-HhlKE_5vtU3TWesCP44G64JXXMQw5HSyAhb9LxoOGUZMAYSm5WQxiN4ssBKx7sQi10ME6o/s2048/IMAGE_C1C07824-5C12-4BF0-BCAF-4617F94E24F6.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7iVVxMlT71kP6lA1EOTfckXmpgTvi7zrHlWMFXDqTgim7uv_q2XxefZSqJxBUnGhk03C-HhlKE_5vtU3TWesCP44G64JXXMQw5HSyAhb9LxoOGUZMAYSm5WQxiN4ssBKx7sQi10ME6o/s2048/IMAGE_C1C07824-5C12-4BF0-BCAF-4617F94E24F6.PNG" width="500" /></a><br />
<br />
When you are close to a bus stop or a subway station Google Now tells you when the new vehicle will arrive.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEk03Yic4q6uT0uZSp7O09A8hwgajCE9kMZvLs9-fFHFBY_ANhMtPNQJx3u519gOuHZuh8R1Qa3rGPXfcLNt5R6blKepkX_KQJEgYVBUOOfRfG7vJvZsC6jr-BTteb8I3mPRBCWYqloXs/s2048/IMAGE_A8B6607B-CA5F-4D16-AA3F-FAF900F6625D.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEk03Yic4q6uT0uZSp7O09A8hwgajCE9kMZvLs9-fFHFBY_ANhMtPNQJx3u519gOuHZuh8R1Qa3rGPXfcLNt5R6blKepkX_KQJEgYVBUOOfRfG7vJvZsC6jr-BTteb8I3mPRBCWYqloXs/s2048/IMAGE_A8B6607B-CA5F-4D16-AA3F-FAF900F6625D.PNG" width="500" /></a><br />
<br />
Google Now tells you about bar and restaurants around you when you walk down the street. When you are in a restaurant trying to order, Google Now tells you what that restaurants is most known for.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL8ryJCWsS-WrTlN1SqswwcSxuJg5HK4gShHqQVSOGjr65FrQQFe-Oc407oZ5lm7m-elhGgjvtj8_rHcxlWlLcQ_95hm5F_jhqU4gxHt8g1_tjvGj8kLnaakQceViRrfbEZTl4BmpwFkM/s2048/IMAGE_9D336A98-6872-49E8-BBC8-7B87B459DC7C.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL8ryJCWsS-WrTlN1SqswwcSxuJg5HK4gShHqQVSOGjr65FrQQFe-Oc407oZ5lm7m-elhGgjvtj8_rHcxlWlLcQ_95hm5F_jhqU4gxHt8g1_tjvGj8kLnaakQceViRrfbEZTl4BmpwFkM/s2048/IMAGE_9D336A98-6872-49E8-BBC8-7B87B459DC7C.PNG" width="500" /></a><br />
<br />
When you have a calendar appointment Google now will tell you how to get there on time. For example, if you usually take the bus to get around, Google Now will tell you when to leave, based on how long will take you to walk to the bus stop, when the next bus will arrive, and how long that bus ride will take to get there on time.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sORyWWpO7z1rEEMbU6R0VLV7snrV9f-AH9XtVrrusABfP_MqAtRhvFrWSvOR338Rt9Vzt3DmCFbCvtNU6WSlYwd_5klw6LltLhZeNkgaXNeVIAXeFtjx7TwnmK_sibnItLpKJmXvO5I/s2048/IMAGE_427ADEF8-7C99-4C04-9C9D-E78BAA098656.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sORyWWpO7z1rEEMbU6R0VLV7snrV9f-AH9XtVrrusABfP_MqAtRhvFrWSvOR338Rt9Vzt3DmCFbCvtNU6WSlYwd_5klw6LltLhZeNkgaXNeVIAXeFtjx7TwnmK_sibnItLpKJmXvO5I/s2048/IMAGE_427ADEF8-7C99-4C04-9C9D-E78BAA098656.PNG" width="500" /></a><br />
<br />
If you have an upcoming flight that you searched for Google Now keeps you up to date on the current status, which terminal to go to and updates you if there is a delay.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcp6wDwaSu_zJgAASingwAHz2s-I0fofXAF-i7w3mv_iPfVoNbGvSmssnDVtb1Y7Flbjqg53ZEffHH7kpXE2je9YAqCyfmCEtT6FexQnU7N1pIf0HvD5wPBtqOB_V1yXxbTQOsHASzkaU/s2048/IMAGE_CFB8E55A-A733-403A-9AAF-0218249A9506.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcp6wDwaSu_zJgAASingwAHz2s-I0fofXAF-i7w3mv_iPfVoNbGvSmssnDVtb1Y7Flbjqg53ZEffHH7kpXE2je9YAqCyfmCEtT6FexQnU7N1pIf0HvD5wPBtqOB_V1yXxbTQOsHASzkaU/s2048/IMAGE_CFB8E55A-A733-403A-9AAF-0218249A9506.PNG" width="500" /></a><br />
<br />
Google Now keeps you updated on your favorite sport team in real time. There is no need of customization. Google Now knows about your favorite team based on the search you had done.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF0gYjAlk5cCJpYYs-1AEVZiqVycwabJk-6OmMbZ4InL30emTGnreBx8sKZZIkY49sfwwYIvCHu8Np3zjmRC6kyPQZtUxjztibK6vcRTfGnY8WBT8cuaVIE2FQT6tm5EyZ7nsgTg7h1JM/s2048/IMAGE_E6E9908C-5BCA-4440-BF41-D229310D36CF.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF0gYjAlk5cCJpYYs-1AEVZiqVycwabJk-6OmMbZ4InL30emTGnreBx8sKZZIkY49sfwwYIvCHu8Np3zjmRC6kyPQZtUxjztibK6vcRTfGnY8WBT8cuaVIE2FQT6tm5EyZ7nsgTg7h1JM/s2048/IMAGE_E6E9908C-5BCA-4440-BF41-D229310D36CF.PNG" width="500" /></a><br />
<br />
Google Now knows when you are traveling. When you travel internationally Google Now gives you a card for currency convention, translation, and it even tell you what time is back home.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHWr4PF4JpRp1iNacdxpnpM8dyDpC_OLdj4o2mYRsQbb9ZBLSmpUBhg4BgNHDyyCVTTQk-90bNAs9QIAoPyaYAnqJgPw48ft_fYz6x2aXZFcCFWmUrrZOvrEQ-jH0Ao9nMIxyNU3_7l8/s2048/IMAGE_6941A110-D492-495C-891F-401086FFB8EE.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHWr4PF4JpRp1iNacdxpnpM8dyDpC_OLdj4o2mYRsQbb9ZBLSmpUBhg4BgNHDyyCVTTQk-90bNAs9QIAoPyaYAnqJgPw48ft_fYz6x2aXZFcCFWmUrrZOvrEQ-jH0Ao9nMIxyNU3_7l8/s2048/IMAGE_6941A110-D492-495C-891F-401086FFB8EE.PNG" width="500" /></a><br />
<br />
<b>How it works</b><br />
<br />
The way to access Google Now is by swiping from the home screen.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlWZfpHC-viHhXulFlZqVl6QoTNc72srI3Q1SOe5BTRTugS-4p56C2pjxdpF4qQLUzopdio-BAGD-H3plw1ugPWl61zluwlhaBTBHa9GrZExBhdKvRkde-FBuEGlhxZwwSBK05cLVVuo/s2048/IMAGE_47813269-33CC-4188-83E6-2123F4855239.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlWZfpHC-viHhXulFlZqVl6QoTNc72srI3Q1SOe5BTRTugS-4p56C2pjxdpF4qQLUzopdio-BAGD-H3plw1ugPWl61zluwlhaBTBHa9GrZExBhdKvRkde-FBuEGlhxZwwSBK05cLVVuo/s2048/IMAGE_47813269-33CC-4188-83E6-2123F4855239.PNG" width="500" /></a><br />
<br />
Google now display a home screen with all the cards that apply to your specific situation. In the image below the first card list an upcoming meeting, and tell me how long is going to take me to get there.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-bxezLKZjKFYHUxi1s9iCe3TS6pTvx3E7TA7O6m2Vr5nNy5hXzvjOyYSKL7xLgSV6SDJSDQHYKO9QUYRhOrRE6ZKM1IpOmjzkUZ7KXzNtQMa6_7xqkqoyZL8qVlYZwGT3m4txN4zZ0w/s2048/IMAGE_702AF96A-0FA4-49E8-8ABE-59D30CEC64DF.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-bxezLKZjKFYHUxi1s9iCe3TS6pTvx3E7TA7O6m2Vr5nNy5hXzvjOyYSKL7xLgSV6SDJSDQHYKO9QUYRhOrRE6ZKM1IpOmjzkUZ7KXzNtQMa6_7xqkqoyZL8qVlYZwGT3m4txN4zZ0w/s2048/IMAGE_702AF96A-0FA4-49E8-8ABE-59D30CEC64DF.PNG" width="500" /></a><br />
<br />
A notification will warn me when is time to leave, based on how long is going to take me to get there.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxND9kLOiYWL87O5AC0IEv3sCFma9kjPdZr-XxdBG7-XDL-up9oZAFNIJxpb6mYgoATPzemUual02_G6RKfH7iM_8hgbJ2dcoKfHtIccgOKFy71p1KJYlicYKCNBckUAwkG5jUuGhhAE/s2048/IMAGE_217B6FC9-7BEB-4769-8448-F1062379C811.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxND9kLOiYWL87O5AC0IEv3sCFma9kjPdZr-XxdBG7-XDL-up9oZAFNIJxpb6mYgoATPzemUual02_G6RKfH7iM_8hgbJ2dcoKfHtIccgOKFy71p1KJYlicYKCNBckUAwkG5jUuGhhAE/s2048/IMAGE_217B6FC9-7BEB-4769-8448-F1062379C811.PNG" width="500" /></a><br />
<br />
Google Now knows if I are a Giant's fan, and tell Me that there is a game in a few hours, and I can buy tickets from here.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHlJNRkQRi2Nx0sjX3BZZ_dkEqucYrQ0KBMyVh4xBWC9FmMpcYc7m58v7SG67BoVXppJBLdWU8nJ8Jd28Vc_xVCtPaW72R1pqwjkDRJcOiLB6DPMXxTNHs3tiRoisyl4IDvZCPAZfTLU/s2048/IMAGE_D872579B-5725-4A35-A48F-64568DC3B629.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHlJNRkQRi2Nx0sjX3BZZ_dkEqucYrQ0KBMyVh4xBWC9FmMpcYc7m58v7SG67BoVXppJBLdWU8nJ8Jd28Vc_xVCtPaW72R1pqwjkDRJcOiLB6DPMXxTNHs3tiRoisyl4IDvZCPAZfTLU/s2048/IMAGE_D872579B-5725-4A35-A48F-64568DC3B629.PNG" width="500" /></a><br />
<br />
Google now knows that I am not here too often, and that I don't know the area too well. Google now shows few interesting places nearby, including some restaurants.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLeMYEYosldh1h-nSnnvyuOfq5mbL-EslU6vMpVDRwcS2Uyfp5hCgOknlzz4s0b-LGJEh79ikvyiq7vDldXLdzWXkXu_SaObZuFjNpTUO7L_kspMROkbKj3i9nLOAFQH5kyUNBS0uSlhc/s2048/IMAGE_3CA2F169-A152-45C7-9704-2D46073FFEC8.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLeMYEYosldh1h-nSnnvyuOfq5mbL-EslU6vMpVDRwcS2Uyfp5hCgOknlzz4s0b-LGJEh79ikvyiq7vDldXLdzWXkXu_SaObZuFjNpTUO7L_kspMROkbKj3i9nLOAFQH5kyUNBS0uSlhc/s2048/IMAGE_3CA2F169-A152-45C7-9704-2D46073FFEC8.PNG" width="500" /></a><br />
<br />
If a tap on a specific restaurant, this takes me to google maps, and from here I can get various information, and even book a table if I want to.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJhQAt3E5yuH0HUcKcWVXktfN4poi7xipw1JrQD9JnQnz_cy30JHbTkKojRSvIEzh3mv_FPLQVN64fuoeciQcdr5NGK2N__fbDpcAgoRMcio7jtgyBgQeHj6NHSnjvBr7Ok9OKeip1x1c/s2048/IMAGE_50A08102-2071-4385-9AE1-CDE8DC273289.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJhQAt3E5yuH0HUcKcWVXktfN4poi7xipw1JrQD9JnQnz_cy30JHbTkKojRSvIEzh3mv_FPLQVN64fuoeciQcdr5NGK2N__fbDpcAgoRMcio7jtgyBgQeHj6NHSnjvBr7Ok9OKeip1x1c/s2048/IMAGE_50A08102-2071-4385-9AE1-CDE8DC273289.PNG" width="500" /></a><br />
<br />
Google Now knows that I have a flight scheduled, and that it is delayed, so I have time for my usual workout to the gyn if I want to.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Rc_1zYgqZCkTSWJkm_VGj9bn-MDfpIaCIvEwu2lkrgrSQKKcDDrWE2nN-kT6pFxuOCYpoTY0u95qQnbFWlh32RBKFwUHle-LEBa25KMLpby7ii6bW0pS477ZyN_rhFqiASQfrsYbc1U/s2048/IMAGE_151B8CE6-5390-4322-8673-84D05E29FF75.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Rc_1zYgqZCkTSWJkm_VGj9bn-MDfpIaCIvEwu2lkrgrSQKKcDDrWE2nN-kT6pFxuOCYpoTY0u95qQnbFWlh32RBKFwUHle-LEBa25KMLpby7ii6bW0pS477ZyN_rhFqiASQfrsYbc1U/s2048/IMAGE_151B8CE6-5390-4322-8673-84D05E29FF75.PNG" width="500" /></a><br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-63809268540786009822012-07-12T09:00:00.000-07:002012-07-12T09:00:28.799-07:00Jellybean new search UIJellybean introduced Search Cars as the new UI for displaying featured search results. Search Cards provide a visual and easy-to-scan display of the results, accompanying textual information with images and link to the source.<br />
Following some examples. A search of Angelina Jolie's movies would return a picture of the actress alongside with a list of her most popular movies and a link to Wikipedia.<br />
A search of the earth's mass would return an image of our planet with the mass value in kilos and a link to Wikipedia.<br />
In a way Google was already experimenting with a similar approach in their new search <a href="http://designscreenshots.blogspot.com/2012/05/what-do-you-love-from-google.html">"what do you love"</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDw9IUWqu4jK0_HfI2LmAKy06F-sy2KiFViPZC8Q7I1thBpvzTdzHQIpXCt-BVklu5yaEDy6na46z79n-Ubeq3kujx-D3wxzNvINwhr3GTuu2EMsJqJRcApeHjQgmMqYxBkSuUZImpRI/s912/IMAGE_4572D8CD-DB75-4440-BBAC-E73A6FC79496.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDw9IUWqu4jK0_HfI2LmAKy06F-sy2KiFViPZC8Q7I1thBpvzTdzHQIpXCt-BVklu5yaEDy6na46z79n-Ubeq3kujx-D3wxzNvINwhr3GTuu2EMsJqJRcApeHjQgmMqYxBkSuUZImpRI/s912/IMAGE_4572D8CD-DB75-4440-BBAC-E73A6FC79496.jpg" width="500" /></a><br />
But this is not all. Searching is getting smarter using your current location to provide results that better fit your needs. <span style="background-color: white;">Searching for the weather forecast displays information about your current location and five days forecast. Searching for Starbucks displays Starbucks location around you.</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTjOBVtHKPzhvaS_viJCE0KyNsjkgJz2YsbU5UapV7IfQSYQ2RtPAdgj_rBRNPZV4Ko9Ct-R5D-Vx3cpLKEGZIvuKNO0SYkxFutVzmKt9_5MziCAZw8b7IiRCa9DeG-LYeT0YWkayQtg/s2048/IMAGE_8875A775-E14A-4C9E-8169-C3B043931809.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTjOBVtHKPzhvaS_viJCE0KyNsjkgJz2YsbU5UapV7IfQSYQ2RtPAdgj_rBRNPZV4Ko9Ct-R5D-Vx3cpLKEGZIvuKNO0SYkxFutVzmKt9_5MziCAZw8b7IiRCa9DeG-LYeT0YWkayQtg/s2048/IMAGE_8875A775-E14A-4C9E-8169-C3B043931809.PNG" width="500" /></a><br />
Searching for pictures of a specific subject returns a set of images organized in a grid.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiurFW1B2eubSCN7yoiVtvpf-NkCxRwjtnWiMgvqA9IkjxFsUBDDdouBnlPcN6K7hDJFVmbJoTkItRflbhAy-GmcyyNmPiaJVTGTstpvWher9p8jbKvOL1F_VBu_J9iUBoo8soyYYd_fs/s2048/IMAGE_F88CFE57-06D1-4F1E-BD8D-79B78FBE87C5.PNG" style="background-color: white;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiurFW1B2eubSCN7yoiVtvpf-NkCxRwjtnWiMgvqA9IkjxFsUBDDdouBnlPcN6K7hDJFVmbJoTkItRflbhAy-GmcyyNmPiaJVTGTstpvWher9p8jbKvOL1F_VBu_J9iUBoo8soyYYd_fs/s2048/IMAGE_F88CFE57-06D1-4F1E-BD8D-79B78FBE87C5.PNG" width="500" /></a><br />
Swiping away the search card would reveal more results.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXI8yLD5SEEuyRX2aEkqbPRVafUVt_6X07f1VPkqJRf0eRbb0ZuKs1aFNLic3lYuJf3YiUxv1UC6F3YhEACxEQhgdXeluMmlVMhA0Q6uQsO6He5Qua155iEMbN_jrmoB-Jd2H6vDAkBE/s2048/IMAGE_FE500D04-DDD7-4E34-AE9A-DCDC68CCA10E.PNG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXI8yLD5SEEuyRX2aEkqbPRVafUVt_6X07f1VPkqJRf0eRbb0ZuKs1aFNLic3lYuJf3YiUxv1UC6F3YhEACxEQhgdXeluMmlVMhA0Q6uQsO6He5Qua155iEMbN_jrmoB-Jd2H6vDAkBE/s2048/IMAGE_FE500D04-DDD7-4E34-AE9A-DCDC68CCA10E.PNG" width="500" /></a><br />
In place of the cards Jellybean will then display a more traditional scrolling list of all results.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJOA5MIYdc-vdigsS75y-MTBvqEnAuRzhkGTi7VL4Qs0FGCERdey23ewk-gEjG25i890rwfh0XlyB6x2y9B9uQkYGAc_IeArSfKEx-qp6a19nJUPoI1TWmmspgRb-5UtRSF94msXc2kU/s2048/IMAGE_4B13CB2D-A467-42FC-A4B4-D81B7DE8268D.PNG" style="background-color: white;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJOA5MIYdc-vdigsS75y-MTBvqEnAuRzhkGTi7VL4Qs0FGCERdey23ewk-gEjG25i890rwfh0XlyB6x2y9B9uQkYGAc_IeArSfKEx-qp6a19nJUPoI1TWmmspgRb-5UtRSF94msXc2kU/s2048/IMAGE_4B13CB2D-A467-42FC-A4B4-D81B7DE8268D.PNG" width="500" /></a><br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-10497029641704158922012-07-06T14:22:00.004-07:002012-07-06T17:30:42.885-07:00Metro Style UI on the iPadI am very intrigued by the new <a href="http://en.wikipedia.org/wiki/Metro_(design_language)">Metro</a> design introduced by Microsoft, and I was excited to experience it on the iPad.<br /><a href="http://itunes.apple.com/us/app/track-8/id519363162?mt=8">Track 8</a> is a gorgeous Metro music app with nice graphics, a clean layout, and smooth animations between menus.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-D_tCzy4LpYKSR8rneTSblakRRAoY0MLTpCGxVYPFuvwMVzsCnt48yPZmxmU0Rk200GzH4nCqMw11MrDzFVf0TzOms9mchfVnl8vDyYQ6-0LzCy_KIXn6ztxnArVlbmHzWV5oMRM39A/s1024/track8_main.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-D_tCzy4LpYKSR8rneTSblakRRAoY0MLTpCGxVYPFuvwMVzsCnt48yPZmxmU0Rk200GzH4nCqMw11MrDzFVf0TzOms9mchfVnl8vDyYQ6-0LzCy_KIXn6ztxnArVlbmHzWV5oMRM39A/s1024/track8_main.png" width="500" /></a><br />Track 8 displays songs by artists, albums and playlist, and it shows best if your songs all have album artwork.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4xDMi0nbpYcEt28bzfKjFDwrkvMCpJmP9SmlWGurBSpbHipmQisB72JzXiGZ1xWE-8cVDemFQBj1jIpuznAGUKgryCug6Wt5iA0rNtQUA_ydOuZrzoVxJp_MtbAPCq9bkXamgDlQaN6Y/s800/original.png"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4xDMi0nbpYcEt28bzfKjFDwrkvMCpJmP9SmlWGurBSpbHipmQisB72JzXiGZ1xWE-8cVDemFQBj1jIpuznAGUKgryCug6Wt5iA0rNtQUA_ydOuZrzoVxJp_MtbAPCq9bkXamgDlQaN6Y/s800/original.png" width="500" /></a><br />Less impressive, but still interesting, is FlickStack: a photo browsing app for Flickr and 500px photos.</span><br />The style adopted by FlickStack is a mixture between iPad and Metro style. Below an image of the home screen.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Gd7r09Ou-lLRr5KyLSeTY9Z61CUiRxFhHK2Ztpt7-pK-9B1G1WZct0XHK7LUQU3vtEC6obyuZSc7dbZJfd53k9lE1yl_4xU0kKpqi2wibjKwsRkMOxBSXa7b-QaZcN1AABtvu33uDl0/s2048/IMAGE_5848E14B-7771-4F20-B704-3CB48F35A5EB.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Gd7r09Ou-lLRr5KyLSeTY9Z61CUiRxFhHK2Ztpt7-pK-9B1G1WZct0XHK7LUQU3vtEC6obyuZSc7dbZJfd53k9lE1yl_4xU0kKpqi2wibjKwsRkMOxBSXa7b-QaZcN1AABtvu33uDl0/s2048/IMAGE_5848E14B-7771-4F20-B704-3CB48F35A5EB.PNG" width="500" /></a><br />When in portrait orientation the left navigation is collapsed and the picture tabloid takes the full screen<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFnk7Wez1H_ock_6tRe93p5L4djRRCk5z7NPWQcJi4r-798f8uOig-SCM3Ev2qbDn-_xbRZJdLRejhcDNQlYASczR9XXFbqYmtE5VnPWSgClyKVxeur3yObeHnTSNTnodgl0t2iItAho/s2048/IMAGE_FE62AB70-FCF2-46BF-9E45-D70371B3E182.PNG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFnk7Wez1H_ock_6tRe93p5L4djRRCk5z7NPWQcJi4r-798f8uOig-SCM3Ev2qbDn-_xbRZJdLRejhcDNQlYASczR9XXFbqYmtE5VnPWSgClyKVxeur3yObeHnTSNTnodgl0t2iItAho/s2048/IMAGE_FE62AB70-FCF2-46BF-9E45-D70371B3E182.PNG" width="500" /></a><br />The images of a selected stream are displayed in a even grid, which I found visually less interesting.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWGUtMKpu0k7DE3zZo9x6RWh3bk87JKuAsHmPrndL26woIFkSZz_qTp121ZNO08ebF33BHi08TzJmQyaV_0xKejK_qc1fZrSqRqk3xEQBBVtK22qFAg29wIkXFnU2VHb9kyn5iadSEPr8/s2048/IMAGE_5FF0DDF3-42F8-4CBC-9F4D-9C018E99FC56.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWGUtMKpu0k7DE3zZo9x6RWh3bk87JKuAsHmPrndL26woIFkSZz_qTp121ZNO08ebF33BHi08TzJmQyaV_0xKejK_qc1fZrSqRqk3xEQBBVtK22qFAg29wIkXFnU2VHb9kyn5iadSEPr8/s2048/IMAGE_5FF0DDF3-42F8-4CBC-9F4D-9C018E99FC56.PNG" width="500" /></a><br /></br><br />The same view in landscape orientation displays the navigation to all streams, compacted in a panel on the left, and the images of the screen on the right. I found this layout a little too busy and unnecessarily complex.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZK69W6XN5uxYIS9e_gVg4I1SSeOiWlXJG_G_GL4KNXRE6luJxmFPU8yhOLVdU2j0pDO5RLcAM207mNjZRgYZW-Z96Fy1aw6RiKsXRr5cpa5Z2w3saJYU9aULVZNXizLZVVSvl5o3_1Y/s2048/IMAGE_1DE41AD5-5582-497A-B978-2484BECF8BC4.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZK69W6XN5uxYIS9e_gVg4I1SSeOiWlXJG_G_GL4KNXRE6luJxmFPU8yhOLVdU2j0pDO5RLcAM207mNjZRgYZW-Z96Fy1aw6RiKsXRr5cpa5Z2w3saJYU9aULVZNXizLZVVSvl5o3_1Y/s2048/IMAGE_1DE41AD5-5582-497A-B978-2484BECF8BC4.PNG" width="500" /></a><br />If you are not on a budget, you can experience, for $25, a more complete Metro experience on your iPad by using <a href="http://itunes.apple.com/us/app/win8-metro-testbed-powered/id514878988?mt=8">Win8 Metro Testbed – powered by Splashtop</a>. Win8 Metro Testbed is a simple remote desktop application, and it requires a connection to a PC installed with Windows 8 Consumer Preview. <br /><br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-38499630675579992222012-06-29T18:13:00.000-07:002012-06-29T18:13:16.139-07:00Parallel Browsing Across CategoriesAmazon Windowshop has an interesting solution for allowing browsing products within a specific category and across related categories. Categories are listed on the top of the main screen, and products are listed below each category. Vertical scrolling is more convenient than horizontal scrolling and this arrangement makes it easy to browse products from multiple categories at once. Amazon cleverly arranges related categories next to each other, for a more effective parallel browsing experience.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJIrRRB1qFiwMbk5-4VxCsax2WvLZ6_gS5lJWSW-qHaXjAWWIyRoMAtW6WP4KMtwrtuJCWLUd3GOmXDLjGJhhh_Ce5Bu-eLFd4IcFyzxdKAKN2LJe5zVaU5mEeZEnfbr3k1mHrsqs900/s2048/IMAGE_415ADE8D-6C8C-4B3E-BF16-9C6A65CAD1E6.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJIrRRB1qFiwMbk5-4VxCsax2WvLZ6_gS5lJWSW-qHaXjAWWIyRoMAtW6WP4KMtwrtuJCWLUd3GOmXDLjGJhhh_Ce5Bu-eLFd4IcFyzxdKAKN2LJe5zVaU5mEeZEnfbr3k1mHrsqs900/s2048/IMAGE_415ADE8D-6C8C-4B3E-BF16-9C6A65CAD1E6.PNG" width="500" /></a><br />
Tapping on any of the top level category drills down to subcategories. The example below display the subcategory for Electronics.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_VSddquAXyk6_-JZ4zY7VEdLNEmFDgqjSypt5qdQeHMXUMrypu7VsfCRoecNiC8NqUmytItecDknnbYK-Ix757Hd1vSnGFZLUXdGE3VXr0cHF05YYRWPt3F3pmtg89ePylhDUxaKEdGo/s2048/IMAGE_16D13F43-F46D-4E6E-8E81-1804B996731B.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_VSddquAXyk6_-JZ4zY7VEdLNEmFDgqjSypt5qdQeHMXUMrypu7VsfCRoecNiC8NqUmytItecDknnbYK-Ix757Hd1vSnGFZLUXdGE3VXr0cHF05YYRWPt3F3pmtg89ePylhDUxaKEdGo/s2048/IMAGE_16D13F43-F46D-4E6E-8E81-1804B996731B.PNG" width="500" /></a><br />
When searching for an item, all categories that contains search result will display and user may drill within the filter categories.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNRDw87pVg8WdkLsyZgQwTHiiG7l7_7A2x7pMMnLJPyKprQhMFFOxpuUcdajdJ5qCTRggnwU2kVqMFOoUW8EJEVe5_JJgqi6wLayB-XSHkI_HluoVHB6XFPR0KKBtmAr4ewgacFj48e0/s2048/IMAGE_4AB9D5DE-707D-4AFA-B0E6-5C1694549311.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNRDw87pVg8WdkLsyZgQwTHiiG7l7_7A2x7pMMnLJPyKprQhMFFOxpuUcdajdJ5qCTRggnwU2kVqMFOoUW8EJEVe5_JJgqi6wLayB-XSHkI_HluoVHB6XFPR0KKBtmAr4ewgacFj48e0/s2048/IMAGE_4AB9D5DE-707D-4AFA-B0E6-5C1694549311.PNG" width="500" /></a><br />
The example below show the results for the search term "canon 50mm", after drilling to the Lens subcategory.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUeOdBMEZNAl2A_opgMvh6CnIXVn3ssUnChDzAlm3WI-sQdq__K1Tnin-EbnI3QoHs67bwfNckbRO3zrmlVWfK3TIcm_Bh0sstVzgihsAGqoTESHJZJe0F8U1jFEwSWpMwQ5FBKIZhAP0/s2048/IMAGE_4382D743-E29C-4241-9401-6701699FE513.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUeOdBMEZNAl2A_opgMvh6CnIXVn3ssUnChDzAlm3WI-sQdq__K1Tnin-EbnI3QoHs67bwfNckbRO3zrmlVWfK3TIcm_Bh0sstVzgihsAGqoTESHJZJe0F8U1jFEwSWpMwQ5FBKIZhAP0/s2048/IMAGE_4382D743-E29C-4241-9401-6701699FE513.PNG" width="500" /></a><br />
Tapping on any of the product reveals its details. When in this view user can easily browse details for all products in that category, by tapping on the arrow navigation on the bottom.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpMplwUuwMF9HVRjYBtWzXh0-psxjSYUIb_vp8sWOuCSfrNHARNB0d4WpMvtycWhnzySlVzlYbOxqBAZpYdxznRUtSurJjWmvZYcHUfBjdmm88w91qx06Y23AropTjnKu6pwhxryd49k/s2048/IMAGE_17704824-0206-4417-9971-DF8A6C7D5169.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpMplwUuwMF9HVRjYBtWzXh0-psxjSYUIb_vp8sWOuCSfrNHARNB0d4WpMvtycWhnzySlVzlYbOxqBAZpYdxznRUtSurJjWmvZYcHUfBjdmm88w91qx06Y23AropTjnKu6pwhxryd49k/s2048/IMAGE_17704824-0206-4417-9971-DF8A6C7D5169.PNG" width="500" /></a><br />
Amazon navigation is very clever and fun to use, enabling parallel browsing within multiple categories. You can view this short movie where I capture the interaction with this app.<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/ZM_8NWcFIHY" width="640"></iframe>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-53563350760519729572012-06-26T13:20:00.000-07:002012-06-26T13:20:37.195-07:00Faceted Search SlidersWhile looking for interesting designs I stumbled upon <a href="http://whichbook.net/">whichbook.net</a>, which has an interesting solution for displaying search facets. Whichbook.net represents each facet in terms of its extreme values. I found this approach to be very clever, simple and intuitive. Try to apply a more traditional label-per-slider approach to this screen. Maybe you can do better than me, but I could only get to a more complex and confusing list.<br />
<br />
Can you do better?
Guess what: I ended up buying a book! :)<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqooMe9fKDkLnbZB6Dr68q4DIyM9r2s_jG-BWKdzEpeWloGwdhj_5C44d5bOP_cvgKG2qxAHwv0ow0tmS5LdqGVAMCCAS2xe5yPDlLBXpoMlLE7eYe-hj6rgeq5-Cqy2-xex2aaqb0AM/s512/Screen%252520Shot%2525202012-06-02%252520at%2525207.35.21%252520AM.png" style="background-color: white;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqooMe9fKDkLnbZB6Dr68q4DIyM9r2s_jG-BWKdzEpeWloGwdhj_5C44d5bOP_cvgKG2qxAHwv0ow0tmS5LdqGVAMCCAS2xe5yPDlLBXpoMlLE7eYe-hj6rgeq5-Cqy2-xex2aaqb0AM/s512/Screen%252520Shot%2525202012-06-02%252520at%2525207.35.21%252520AM.png" /></a>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com2tag:blogger.com,1999:blog-7727946596112880413.post-11453664303243419652012-06-25T04:48:00.000-07:002012-06-26T09:26:23.570-07:00Thumb Reach Area on Smartphones<a href="http://www.lukew.com/ff/entry.asp?1310">Luke Wroblewski in his seminar, Designing Mobile Web Experiences</a>, speaks about the area of easy reach in mobile devices. Luke claims that smartphones have preferred reach zones when operated in portrait and landscape orientation. Devices used in portrait orientation are usually operated with one hand, and the preferred reach zone is located in the lower center of the screen.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2fkgZB0MbOsgcNMeLibZFKftjIQvGHZb8XoeG8jJZEJ5tgPG6FLs3RyrtbUYunf-SS9RvHK5zt24QRGZP1b1s8EV-GUaVEPZwaL3fAh6cywdHUunCCl0inRedpKZfVpryT1kblH_j3hI/s850/IMAGE_01937390-6A2B-4B93-8E68-D71A48C47526.JPG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2fkgZB0MbOsgcNMeLibZFKftjIQvGHZb8XoeG8jJZEJ5tgPG6FLs3RyrtbUYunf-SS9RvHK5zt24QRGZP1b1s8EV-GUaVEPZwaL3fAh6cywdHUunCCl0inRedpKZfVpryT1kblH_j3hI/s850/IMAGE_01937390-6A2B-4B93-8E68-D71A48C47526.JPGG" width="500" /></a><br />
<br />
Devices used in landscape orientation are usually operated with two hands, and the reach zone is significantly different.<br />
<br />
<a href="https://lh6.googleusercontent.com/-hqZTw6hXlk0/T-hUyTSgm2I/AAAAAAAAFUk/e4b7yRNjEBI/s382/IMAGE_88214D91-DB50-4220-8C53-D87B4C513BA1.jpg"> <img src="https://lh6.googleusercontent.com/-hqZTw6hXlk0/T-hUyTSgm2I/AAAAAAAAFUk/e4b7yRNjEBI/s382/IMAGE_88214D91-DB50-4220-8C53-D87B4C513BA1.jpg" width="500" /></a><br />
<br />
While listening to Luke's explanation I realized I have always seen this, but somehow my brain never registered the observation.<br />
Few popular iPhone apps, took this lesson to heart and opted for a custom tab navigation bar, placing the main action in the lower center of the screen. This is, in fact, a convenient location for both left and right handed individuals that operate their smartphone in landscape orientation. <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-d76EXFIE6kZtDcbBJhxnjMT6Y4bArgUGy2-vVWDC7O4UGPTtKuzqHumX9uLMvwN2KZfzJFpENtBLTVIXyb0-_qqZzZN6oZeYeEKGk8KqtGdTFwRqjkMx_2FptIg2j81d6yeri40V-k/s1024/socialobject_iphone_design_pattern.png"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-d76EXFIE6kZtDcbBJhxnjMT6Y4bArgUGy2-vVWDC7O4UGPTtKuzqHumX9uLMvwN2KZfzJFpENtBLTVIXyb0-_qqZzZN6oZeYeEKGk8KqtGdTFwRqjkMx_2FptIg2j81d6yeri40V-k/s1024/socialobject_iphone_design_pattern.png" width="500" /></a><br />
<br />
The article below is a collection of different visual designs for tab navigation, most of which seems to emphasize the central tab with a larger size and distinctive style<br />
<a href="http://www.designtickle.com/2012/03/iphone-ios-uitabbar-interfaces/">Examples of iPhone iOS UITabBar Interfaces</a><br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-3075289447561074282012-06-19T16:31:00.000-07:002012-06-19T16:35:25.875-07:00Dealing with Hidden GesturesOur beloved mobile devices rely on a new type of input: multi-touch gesture. This is a relatively new domain, and while some gestures, as pinch to zoom, are becoming a standard interaction, there are many others used sporadically and inconsistently among apps. <br />
Multi-touch gesture is a powerful new way to express input, but how can an app overcome the discoverability challenges?<br />
In this article I am listing few solutions I have run into and few thoughts about their pro and cons. <br />
<b>Help window. </b><br />
Some app, as ArtRage, display all available gestures in a separate window or pop-up invoked from a traditional help button. <br />
The <b>advantage</b> is that I can get help when I need it. <br />
The <b>disadvantage</b> is that I may never open the help to discover that multiple gestures are available.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIXrTvDuuAJ6VrJ6KjRpUTSAWhhZaxOsTtBTrzxRMenDaRLZCqT2l9ojQPBoYRb8Ic6CFqk2hM8u4YTDgaduEmhPYm7oRvB1O8MLIYB8BBDQ9XB2xUBp3dchYFeSW9w9Roe6U05s72U1Q/s2048/IMAGE_D8DE34D0-701A-4CE0-A19C-4F09E4BC6CD2.PNG"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIXrTvDuuAJ6VrJ6KjRpUTSAWhhZaxOsTtBTrzxRMenDaRLZCqT2l9ojQPBoYRb8Ic6CFqk2hM8u4YTDgaduEmhPYm7oRvB1O8MLIYB8BBDQ9XB2xUBp3dchYFeSW9w9Roe6U05s72U1Q/s2048/IMAGE_D8DE34D0-701A-4CE0-A19C-4F09E4BC6CD2.PNG" width="500" /> </a><br />
<b>Overview during startup</b><br />
Some apps, as RDP or Spashtop Remote, display a help screen at the startup which illustrates all main gestures used in the app.<br />
The <b>advantage</b> is that I have to view this information at least once.<br />
The <b>disadvantage</b> is that this information shows when I less need it. The <span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: black; display: inline !important; float: none; font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">pop-up</span> is kind of <span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: black; display: inline !important; float: none; font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">annoying</span>, but I am afraid to permanently closing it, <span style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: black; display: inline !important; float: none; font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">for when</span> I need it in the future. I keep dealing with it, yet being mildly annoyed. More important, I am not sure how to get this information while using the app, which is when I actually need it.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRNffaewwzgyB6oRlH-bvnS2sAjqeH9woT-uLiFsN7OH8NAAHhT8liiBpoj6Q_qsu4kRteyjbHVOdnUfiB1AdC4q42DQSquQWbOusd3gHWr0XcowsMQa0mILw_HSHt38tdkkOCIOpE-o/s2048/1000001559.jpg"><span style="color: black;"><br /></span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRNffaewwzgyB6oRlH-bvnS2sAjqeH9woT-uLiFsN7OH8NAAHhT8liiBpoj6Q_qsu4kRteyjbHVOdnUfiB1AdC4q42DQSquQWbOusd3gHWr0XcowsMQa0mILw_HSHt38tdkkOCIOpE-o/s2048/1000001559.jpg" width="500" /> </a><br />
<b>Help when you need it</b><br />
Another strategy, used by Google app, is to display a help tip the first time I am in a context where the tip applies.<br />
The <b>advantage</b> is that this information shows when I most likely need it.<br />
The <b>disadvantage</b> is that I may forget the gesture in the future, and have no way to bring back these instructions.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgkcQJPNd5YnBj1wHEHSa1NdsSvmiU5AU9sZOLoHYOXPytJPwIMoyuSRmwg_Wva_JjjOnw8NdY39JUDnS1ibSPfXNor0uCBbs7TD_9WW5eSUGYGEf6-ldPHXNRQsWnzG53ovlsi3WX7M/s2048/IMG_0006.jpg"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgkcQJPNd5YnBj1wHEHSa1NdsSvmiU5AU9sZOLoHYOXPytJPwIMoyuSRmwg_Wva_JjjOnw8NdY39JUDnS1ibSPfXNor0uCBbs7TD_9WW5eSUGYGEf6-ldPHXNRQsWnzG53ovlsi3WX7M/s2048/IMG_0006.jpg" width="500" /> </a><br />
<b>Overlay at startup and on demand</b><br />
Finally some app, as Sanpseed, display help information both at the first launch of the app and on demand. <br />
The <b>advantage</b> is that the information is both discoverable for the first time user and easy to retrieve when you need it. This solution provides a place to display both help on the gestures and on other areas of the user interface.<br />
I can't see any obvious <b>disadvantage</b>, except that you may need to remember to get help.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8ooU7xPd8G4wMYH8wp8_kQIbx51hKKDFhY-Uct9RYiQseWDBRquypxUhBuviIsmvu0xRRd6MmOZ8MRF-w246kxh82-KL0o5M4EBYYI1_Pne073D3tNUNqx9GXI4XbOV3xKEElD-dvRI/s2048/IMAGE_F67D1C40-08DF-48E1-88C3-88790353CEF9.PNG"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8ooU7xPd8G4wMYH8wp8_kQIbx51hKKDFhY-Uct9RYiQseWDBRquypxUhBuviIsmvu0xRRd6MmOZ8MRF-w246kxh82-KL0o5M4EBYYI1_Pne073D3tNUNqx9GXI4XbOV3xKEElD-dvRI/s2048/IMAGE_F67D1C40-08DF-48E1-88C3-88790353CEF9.PNG" width="500" /> </a><br />
- Posted using BlogPress from my iPad<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-51599438256535110072012-06-03T05:38:00.001-07:002012-06-19T16:16:01.297-07:00Pan, Zoom and Transform in SketchBook ExpressI was playing with SketchBook Express on my MAC today, and I found the transformation and pan/zoom widgets intriguing.<br />
<br />
<b>Transformation Widget</b><br />
SketchBook Express implements a novel solution for transforming a selected area. Upon selection a widget enables a different type of transformations: move, rotate and scale. The default action is pan, so, If I select, and start dragging right after, the widget will perform a move.<br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMTBqo8C9jAbcX-jXQVCF7Jmz23zb6MEhb2KW_UddBzvm9Kb0Te7YtP879Rq8Or7-5Jdc3dlV8kbYQmGv7UQ_qA1VYBvZHtjsgbAmJGmXx7OPiqB0XvP3xdlvzuehwMVPBYYUd4qn8xK0/s1600/Screen+Shot+2012-06-03+at+8.23.50+AM.png" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ERmbNaePcaGn72NhqZ6mwe4t9QLZtBIcm0bruzX-dwZvssQhyLN62GCRWdOekoLvZbi7ueySaYWW9T1Z-fq1JrUdaG2ACvTF7N8Y5ug2IBmnHPiWtB71ROVtdkAoUlaxEOvXW-hhSK4/s193/Screen%2520Shot%25202012-06-03%2520at%25208.23.42%2520AM.png" />
<br />
The widget appears when moving the mouse near the selection and it disappears when moving away from it. This is a similar show/hide behavior that Word implements for contextual floating toolbars. I found somewhat annoying Word's permanently hiding the toolbar when I move the mouse too far. Clearly Word tries to guess my intentions, but, as usual, smart behaviors are great if they right 90%, and frustrating otherwise. Luckily SketchBook does not fall into this trap, and it provides a simple close button to explicitly hide of the widget.<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/YgoflZj-zzs" width="480"></iframe><br />
<br />
While this widget provides an interesting solution for transforming a selection, it does take some time to get used to it. I found myself always hesitating a bit before starting a move. Will I ever adapt?<br />
<br />
<b>Pan/Zoom Widget</b><br />
SketchBook Express implements also a novel solution for Pan and Zoom. Upon press and hold of the SPACE bar the app displays a floating Pan/Zoom widget.<br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cMe4QBZK42FVCZjZhRUsthOAq1i8h9BSxAF5yEZSSA2wgaSZY5xZkRH7aVoTyDDlWkWU2ZczkW0MDUSgCW5A7DSovUe1oQEDEcZ0Esoq17i5W2zgAsAMemXG_wkK6bMkxMlFkl8hzDo/s1600/Screen+Shot+2012-06-03+at+8.24.18+AM.png" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTAU1tdQTvB9VHmMjN6LXo85YHeKyh2jdptmlJe-3Tl6DrD1_lvIfJGezTie1yiDvKSK0GNFchfM3y1bXQqNvxknhLQX7xWYpVtqzVCdyuvX5HkonIL5KaXaXlplI4cZ3mfABs8i3BeU/s1600/Screen+Shot+2012-06-03+at+8.24.13+AM.png" />
<br />
I can manipulate the view until I get when I want, then release the SPACE bar to return to my previous mode. Pan/Zoom is also an explicit mode, but I found the quasi-modal solution the most appealing.<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/_khWgK8Oozo" width="480"></iframe><br />
<br />
SketchBook Express is free on the MAC. if you find intriguing what I described, try it for yourself!<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com1tag:blogger.com,1999:blog-7727946596112880413.post-54640155764159826522012-05-26T06:23:00.001-07:002012-06-19T16:25:55.319-07:00What do you love? From Google.Today I rediscovered <b><a href="http://www.wdyl.com/#">"What do you love?"</a> </b>from Google.<br />
As usual, I found fascinating new design solution for search, and this is a particular appealing one.<br />
I really like how Google presents me with different context and type of artifact that I pertinent to my search, bubbling up one or more entry I can preview and further explore.<br />
In a sense this is a different way to enable faceted search, by displaying a sample visual snip of the search results.<br />
Once again, I find Google vision, elegant and simple implementation absolutely fascinating.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Msd1uEj8pz9DV9dvfiuovpX_R2O1LypZIxYjJxPa57o5Js6qFOh_EwhXI9i4HAC9viReQM3Jn1LumjJG9dkyhgF_pbTMAUWZcbkSL52lnlZo9EaJNSBL4aIv_3EHH9L3yPQfHcGkvbs/s800/Screen%20Shot%202012-05-26%20at%208.48.40%20AM.png"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Msd1uEj8pz9DV9dvfiuovpX_R2O1LypZIxYjJxPa57o5Js6qFOh_EwhXI9i4HAC9viReQM3Jn1LumjJG9dkyhgF_pbTMAUWZcbkSL52lnlZo9EaJNSBL4aIv_3EHH9L3yPQfHcGkvbs/s800/Screen%20Shot%202012-05-26%20at%208.48.40%20AM.png" width="500" /></a><br />
<br />
In a sense this is not a completely new idea. <a href="http://www.wolframalpha.com/">Wolfram|Alpha</a> started doing something similar few years ago, with a little different spin: more toward expert knowledge ability and data analysis than information browsing.<br />
If you type a generic search term in Wolfram|Alpha as <a href="http://www.wolframalpha.com/input/?i=interaction%20design">"interaction design"</a>, the results are not all that exciting. Conversely, if you type a more scientific keyword, as <a href="http://www.wolframalpha.com/input/?i=temperature">"temperature"</a> you will get extremely interesting results.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDGQDrHAVEiBAVFHWN2sQaOWNUb9y-8xwbo-PIv3Maip61FYLF1y62MoFx8YCFCnGvh1d3Gc9jvTq60DGs3ylFRFz8seNx6XolGKoLATwAeNdsXaE-DfOuY6P5JLvoXcu2CsfZa-p9vI/s800/Screen%2520Shot%25202012-05-26%2520at%25209.44.30%2520AM.png"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDGQDrHAVEiBAVFHWN2sQaOWNUb9y-8xwbo-PIv3Maip61FYLF1y62MoFx8YCFCnGvh1d3Gc9jvTq60DGs3ylFRFz8seNx6XolGKoLATwAeNdsXaE-DfOuY6P5JLvoXcu2CsfZa-p9vI/s800/Screen%2520Shot%25202012-05-26%2520at%25209.44.30%2520AM.png" width="500" /></a>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-33017219483666449922012-05-18T18:53:00.001-07:002012-05-19T11:41:24.530-07:00Beautiful Visualizations on the iPadROAMBI is an iPad app that displays gorgeous visualizations with beautiful and fluid interactivity. Here some examples.<br />
Pie chart.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLveC1L6AKZS15BHRJEeqrBP-uLta9eeMm0DgiYzuEcVAPRSZqhqHM8qynVCXKRarQkFe5OScTl6xjHqSdD09PGJoJUfcooDwzyNW8x5DPFKbdi0_Smnmgto1XQikk7_g_gacfsDFTqH0/s2048/IMG_2964.jpg"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLveC1L6AKZS15BHRJEeqrBP-uLta9eeMm0DgiYzuEcVAPRSZqhqHM8qynVCXKRarQkFe5OScTl6xjHqSdD09PGJoJUfcooDwzyNW8x5DPFKbdi0_Smnmgto1XQikk7_g_gacfsDFTqH0/s2048/IMG_2964.jpg" width="500" /> </a><br />
Bar chart.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VKKZjGA6iohqu8LqLU4sRZZ4AEmKJs9CokESMjJQcWqq42t8CUZ3eHWQvgCC2Q8VV6RpNuIalhv0uNp9JqQ-71tR5OdLEhP29JQQ2xt_W1HZqHZ9TydMHEXNeCd5c9Cf3kp6ksfaZKk/s2048/IMG_2953.jpg"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VKKZjGA6iohqu8LqLU4sRZZ4AEmKJs9CokESMjJQcWqq42t8CUZ3eHWQvgCC2Q8VV6RpNuIalhv0uNp9JqQ-71tR5OdLEhP29JQQ2xt_W1HZqHZ9TydMHEXNeCd5c9Cf3kp6ksfaZKk/s2048/IMG_2953.jpg" width="500" /> </a><br />
Squares.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglndvj3WqvH-LRA6rHXeeep_HE7wbFwRcuocn8M25oRai__mw2SDfsKTlEYS_k-WMBX523WxTFDLm0jDZAMEHdHsVq8g-0Wrc_M-yrAAVfw34MaEXHE9fnQyEFP19n89S3SsMEuh8KcH8/s2048/IMG_2969.jpg"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglndvj3WqvH-LRA6rHXeeep_HE7wbFwRcuocn8M25oRai__mw2SDfsKTlEYS_k-WMBX523WxTFDLm0jDZAMEHdHsVq8g-0Wrc_M-yrAAVfw34MaEXHE9fnQyEFP19n89S3SsMEuh8KcH8/s2048/IMG_2969.jpg" width="500" /> </a><br />
ROAMBI has are many more visualizations but most of the magic actually comes from the interactivity. If you are passionate about visualizations and you have an iPad, I suggest you to play with this app. It is free and has some demo data you can use to explore the different visualizations. The two videos below show some of the features of this app.<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/gCLFu9NjG6A" width="480"></iframe><br />
<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/crDrDDS1kmc" width="480"></iframe><br />
- Posted using BlogPress from my iPad<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-32132455672775958902012-05-15T17:32:00.000-07:002012-05-18T09:14:09.766-07:00Searching, Browsing and Serendipity DiscoverIn the last few years I participated to many discussions about browsing versus searching. I am personally more inclined to search than browse, but recently I am fascinated by a new emerging modality of information seeking: serendipity discovery. There are a number of applications that enable this type of discover. Some applications, as Pandora or StumbleUpon, allow users to discover information they may like using peer-sourcing and social-networking principles.<br />
Other applications, as Aweditorium make the discover a fun engaging experience. While user is getting lost playing with the interface, they may stumble on something of actual interest.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-67bd2KI127_zvbzIxd8-wvebNPriz8qfWfWilJ40CPmMXyLCLk9HMFMq1bKgMEIYNimhoKbXgadb0OVgYhYgbZtUG6fH8UlYzIm-I0RQzYP7cd1Idv8xTVXcDPjaJN56ubqiR2CDW4/s2048/IMG_2978.jpg"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-67bd2KI127_zvbzIxd8-wvebNPriz8qfWfWilJ40CPmMXyLCLk9HMFMq1bKgMEIYNimhoKbXgadb0OVgYhYgbZtUG6fH8UlYzIm-I0RQzYP7cd1Idv8xTVXcDPjaJN56ubqiR2CDW4/s2048/IMG_2978.jpg" width="500" /></a><br />
<br />
Last week, while I was attending CHI 2012, I was intrigued by a presentation that was exposing this same principle: <a href="http://dspace.ucalgary.ca/bitstream/1880/48717/1/2011-1009-21.pdf" target="_blank">The Bohemian Bookshelf Supporting Serendipitous Discoveries through Visualization</a>. Below a video which illustrates the idea.<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="275" mozallowfullscreen="" src="http://player.vimeo.com/video/39034060" webkitallowfullscreen="" width="500"></iframe><br />
- Posted using BlogPress from my iPad<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com4tag:blogger.com,1999:blog-7727946596112880413.post-86546429404716674422012-05-14T03:45:00.001-07:002012-05-18T09:15:03.198-07:00Make it simple and beautifulStambleUpon iPad app has updated its landing page, making it visually striking and extremely interesting. I am kind of impressed by the difference this makes for me, and how much more I enjoy using this app now.<br />
I found the new layout to be simple, beautiful and inviting. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzaW-vHUjY4YEPPnvDAbp9W86HXbd_sApcuV-gUAwoesMZv-l40JkASKj_VK0RsdTGW_aBZZP-joCcyjk2yLmalcqL6l6A1JJbK3N7fXjnLcHIgEnoZDL31lT4Km5Iw14tmrnW9MxANTI/s2048/IMAGE_E4F20590-EB53-4F99-8367-9308FCBCDFC7.PNG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzaW-vHUjY4YEPPnvDAbp9W86HXbd_sApcuV-gUAwoesMZv-l40JkASKj_VK0RsdTGW_aBZZP-joCcyjk2yLmalcqL6l6A1JJbK3N7fXjnLcHIgEnoZDL31lT4Km5Iw14tmrnW9MxANTI/s2048/IMAGE_E4F20590-EB53-4F99-8367-9308FCBCDFC7.PNG" width="500" /> </a><br />
This is the analogous page in the browser. Again, the page is very simple, and tailored to my interests.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6k5dir8kBAyV9dT_iz_rbpa0ZR_lVnkTfzE_SPt7OI-mxpsoEMP0Gjd_YWlfygR36xZ4jf8X9mrIxr0DQFKnpZepFzVh3v954RwgIABDJQ1Suw8s3M6cJRLgZk7w_ppTPFRjf1yLHovg/s800/1337005256031.png"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6k5dir8kBAyV9dT_iz_rbpa0ZR_lVnkTfzE_SPt7OI-mxpsoEMP0Gjd_YWlfygR36xZ4jf8X9mrIxr0DQFKnpZepFzVh3v954RwgIABDJQ1Suw8s3M6cJRLgZk7w_ppTPFRjf1yLHovg/s800/1337005256031.png" width="500" /> </a><br />
<br />
This is how the page used to look not long ago. The categories were displayed on a bar on the top. The page itself showed the recently rated pages with comments and stars. The side panel showed the people that had rated the page. All of these was irrelevant to the use of this app. This was in a sense a facebook-like page which did not make much sense for this type of app. I honestly have no interest on recent activities, neither on who is an active contributors. Let me wonder around and discover stuff I like, simply and unintrusively.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgtr-kWWl-tNTJlUH-_G3OkTA1B7aBhiY_GI5Qxx9IrWgwVvT_lGtpdRS4ZBpXiOcjSi_hiDHl9IIakayMdy3lu2GYR1OTou5282GK7Voy3zNb4yWV0w3c5JClcI0udBcqfahQChQlMQ/s2048/IMAGE_DEA9791E-C5E6-4AE9-96B4-90DE92057E83.JPG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgtr-kWWl-tNTJlUH-_G3OkTA1B7aBhiY_GI5Qxx9IrWgwVvT_lGtpdRS4ZBpXiOcjSi_hiDHl9IIakayMdy3lu2GYR1OTou5282GK7Voy3zNb4yWV0w3c5JClcI0udBcqfahQChQlMQ/s2048/IMAGE_DEA9791E-C5E6-4AE9-96B4-90DE92057E83.JPG" width="500" /></a><br />
Which one do you prefer?<br />
- Posted using BlogPress from my iPad<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-86378019995341596932012-05-09T19:26:00.000-07:002012-05-18T09:15:36.821-07:00Contextual help without the usual drawbacksMobile apps are required to use the screen very wisely, and often there is not enough space to display both icons and labels for commands. This often calls for mechanism of help on demand. Unfortunately hover is not an interaction available on touch devices, which makes difficult to display standard tooltips. <br />
Contextual help may be very powerful if it is well executed. It is much preferable to view help information clearly associated to what they describe, than a global description out of their context. Help should be easy to discover, readily available, yet it should take minimal space, since it becomes irrelevant once user reads it. <br />
Unfortunately most of the applications which implement contextual help, either are difficult to discover, lack of a global view, clutter the UI or use too much real estate.<br />
Only recently I ran into few examples of iPad apps which seems to overcome most of these limitations.<br />
The most recent example of well executed contextual help is implemented in iPhotos. <br />
Help is easy to discover from the icon consistently present on the screen.<br />
When help is invoked it displays a set of callouts which describes the different interface elements in the current screen. <br />
<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/7jnM0_yAY845ZJvwKbJ0ZtMTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgruRdwIKOr3sQy69S4OCmI1FFDk21qEIaB6m_XxAw_Wy-fNBzU72_xz0ybIh4s9EvXbW-h0iN_2DIO9k-XyCfyq3IA5Uy-QMZSBwXs3S1zDUwD-U0r7Xh6yzBmXWF5SNtrLQuWJW_OvhQ/s640/IMG_0010.jpg" width="500" /></a><br />
<br />
Tapping on the help icon again will hide all callouts.<br />
<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/_TEhRrrjDqiIXZEXFBWEzdMTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyE158tdvAGjeL9Vvm7h6YgGISL5IXvUVF2wJguPOMyj_i57857BpPVTggStr3cG7DN_fS_ZfpZjjYPlibUxWqI5Cksy1gpKjAoGkZb9TRsejC4AiBNtlIJfBWGL7hAWDtZuHPRuW0WVE/s640/IMG_0011.jpg" width="500" /></a><br />
<br />
What I like of this solution is that it provides a complete, yet contextual description of what I see on the screen.<br />
Other apps use a glass pain over the interface, to overlay help information in relation of their context. While glass pain solutions are more visually pleasing, they make harder to view the context they are associated to, and they don't work well when the UI elements to describe are as dense as in the case of iPhotos. <br />
<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/EaUm8qUBppyNhW93ceaPutMTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMVRJMBOXvT4-9B8nObldv89kmHsrcH5C7WkIoiEBc8XxDsep4pDmPUaZIXEkQ7tSHIEfVkzdmDo0oe_axK_B5-EI_2oZZcRabdMoBQn3Qyc_8QK8IMxku2w6aUK4ells46pqXwA-Xqc/s640/IMG_0004.jpg" width="500" /></a><br />
<br />
Other apps try to compensate for this information density by showing one help clue at the time. <br />
<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/bFjSy9YimhxHJKgEMAWvv9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRTlk2OX4kgf7Hc-t9uEbzDdd9A19XXLJmmTm0ujxv-NP6cGLG0FvryjyCUZZCWFA7OmAfhR6SXA-ZTAn8Tifhtn4ICBIimQkuvdmHDcHPsZM60gLZwbXZhxc5AnPkSFmuPOSylKIbLk/s640/Photo%2520Aug%252008%252C%252011%252037%252019%2520AM.jpg" width="500" /></a><br />
<br />
This solutions has the drawback of tooltip based help, where user can't get a global view of all clues. He/she is forced in a tunnel view, where only one clue at the time can be uncovered.<br />
It is interesting as the lack of hover on touch devices has forces designer to come up with new, and in this case, better ideas. This is once again the proof that adding constraints may sparks innovation in the design process.<br />
- Posted using BlogPress from my iPad<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com1tag:blogger.com,1999:blog-7727946596112880413.post-17432849763372144242012-05-08T11:53:00.001-07:002012-05-28T07:57:37.453-07:00Guiding Users in Welcome Screen<div>
I like the "wizard" like appearance of these welcome/getting started screen.
It guides the user to watch the tutorial videos is a specific order. I am wondering if they somehow indicate which tutorial the user has watched already. It would be a useful way to represent the progress.
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI60H4nFze3CCFt3XsSzEamQHO5w7fVIDGpZpxPnNfk3PZnMuKjtjjhmnaq47FqCppSDVxPBdvxJv38_jSShND3OaLvCi6_OiIt0D_8YMMYZSKCqzQB3DuakzSsD0alQGdiyf5YSnP_UA/s964/ITune%2520getting%2520started%2520Image.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI60H4nFze3CCFt3XsSzEamQHO5w7fVIDGpZpxPnNfk3PZnMuKjtjjhmnaq47FqCppSDVxPBdvxJv38_jSShND3OaLvCi6_OiIt0D_8YMMYZSKCqzQB3DuakzSsD0alQGdiyf5YSnP_UA/s964/ITune%2520getting%2520started%2520Image.png" width="500"/></a></div>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-56944850498905212212012-05-07T14:22:00.000-07:002012-05-18T09:16:27.966-07:00Delightful Visual Search History in Google iPad AppAnother delightful feature of the updated iPad app is the introduction of the visual sliding history.<br />
If you slide the main page from left to right, the app discloses a hidden panel that displays all recently performed searches.<br />
<br />
<a href="http://goo.gl/photos/8BMwKPlwZv" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAewYgn-u9ghqI3FNODgK7nh3Vkgp9jcyx_szJsmB4MDal5UP-j-E-iVbPyLnomFAMZiCNhMg1j4mTDt-RiWbB7y4sR25fcg7JYW_C0bG1xogHH7qTh481rueK5cl_AQAY4ENJzNjxBM0/s512/IMAGE_60A94A38-2CEF-4077-970C-B7ABD42FB0B2.jpg" /></a><br />
<br />
This alone was good enough to make me smile, until when I discovered that the history was actually a stack of the pages associated with the search.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<a href="http://goo.gl/photos/E9aD5yFCYo" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxEMblKYnzgLol7YczDTo12CUe5bHwR54h-rw43C3yVQxduMug6juy-H5LhUJW6Mb5M-1dPgf-E13NaRNCq8isJANiKipKjFjY-lcclHiPZBYG0lEYIpaXU15gOcEGnpTJgQZcmt0TVck/s512/IMAGE_49323B91-0B09-443E-A1D7-E31A3A70F8B4.jpg" /></a>
<br />
Tapping on the stack would unfold it and displays all the pages in a scrolling horizontal list. That was a wow moment for me.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://goo.gl/photos/CtMP4sSI7I" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrh4SgnBTzJuxcnZnf1XcvuoODySqWfdaGY4QM2s0mbLwEbAnM-dV1aBaEdDepH4bjRoXU4dlwdrVyoYlcaMs18YwRAXLhyI-W_juOlbIDLUKzXeMamVORyJFPNT0pmAiNe7eyvw4LlG4/s512/IMAGE_E26FEE5C-2BF1-4E6D-9712-10682C3FA95E.jpg" /></a>
</div>
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-16060724020530170902012-05-07T14:08:00.000-07:002012-05-18T09:16:47.312-07:00Search Results Preview in Google iPad AppA new view option in the iPad Google app allows to view the result of a search as a preview of the actual pages. I had seen this and used in an older app, which was focused exclusively on this feature. I am glad to have now this beloved feature in my primary search app on my iPad.<br />
<br />
<a href="http://goo.gl/photos/8SdVU2MdGw" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZMARcphbIXQDhpv90dUVEE79Ewvuq_klAfr3J9umzZIkiqszoWZkDev-ZhZLY-X-fU7Njl1nxOsHsOezgLS_yIXvK7NWwkERgebS1k_irD6Q37F2Dgrf85EFaYW_O3jTHXuNsZpbbQU/s512/IMAGE_051256CB-C5D5-4541-8FA6-95201F9436E8.jpg" /></a><br />
<br />
This is the default view for the same search performed on the Google app.By pressing the preview button on the top right, the page displays the previous screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a href="http://goo.gl/photos/1wosSLmjZF" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCPvUnwC0xnsJuvqQ2TSYnpF2irvfByJji8T5MaPPoI135T4QEt58CsbiP6qpx2mlf22g-YYXHCld7GvAoXVV5C6p5fQH-Dz02trd3vzEu3F0mh-A9PJ6Tq3wutJxCJ0xsXnsSfCWYmM8/s512/IMAGE_33D9C2A0-EFC7-4336-ADC0-1E1D514367E7.jpg" /></a>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-24689159030029368232012-05-06T06:15:00.000-07:002012-05-18T09:17:15.011-07:00Clever yet confusing tab grouping affordance on the MAC's ribbonOn the revised ribbon on the MAC, Microsoft designed a very interesting solution to represent a set of contextual tabs. The Charts tab points to the associated Chart Layout and Format tab, representing the relation among them.<br />
<br />
<a href="http://goo.gl/photos/8FCvVVv4tI" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicyS3HW1AtIJrYkLIVd94R19EvLTYq5UsnJ22Hl3rHtA5_5RyK9JFkyMwKoKyiou-9M05hyzGWVPuuvucvZ40Pwbum1BVGfqhxgSiztqhjFKS2ReK3OLKIwwoyvBOJNB7shpad8gQ_t8/s512/%25255BUNSET%25255D.jpg" /></a><br />
<br />
A similar concept is represented in a slightly different way on Windows, which groups the contextual tabs adding a colorized section with label above the contextual tabs.<br />
<br />
<a href="http://goo.gl/photos/3KwWo8qkv1" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITjIax2gC7WFL8HWBmwvtg0q2omoBzOWHnPxvbpifCNDNZx0Mou9KS-dp2FkekbXM4_oGumGnAJL0m2DqMVU9ZXhifKZLoURfOWaga7Rl6jMm23OFBdbqR45Z2YmgpjXwMXHmxqJJl-I/s512/%25255BUNSET%25255D.jpg" /></a><br />
<br />
I found the new solution on the MAC clever and potentially more elegant, but it is currently less obvious then the Windows affordance.<br />
The MAC solution would become much easier to understand if all Charts tabs were using the same purple color. The Charts tab now provide a mixed message to the user. It is visually grouped with the other tabs by using the color green. At the same time it is visually grouped with the purple tabs by using the pointy shape. Confusing.Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-61713964137132936412012-05-05T18:58:00.001-07:002012-05-18T09:17:32.261-07:00Innovative Presentation StyleMy husband today introduced me to this innovative presentation style.<br />
Currently it requires writing your presentation in HTML, which is a huge let down.<br />
Will Microsoft or Apple adopt this as one of their animation styles in PowerPoint or Keynotes?<br />
The result is very impressive and you can try for yourself.<br />
<a href="http://bartaz.github.com/impress.js/#/big">http://bartaz.github.com/impress.js/</a><br />
<a href="http://goo.gl/photos/FhqVV6wh0G" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8jBi1Onmh0AFQMX-k908eaAzfrG7QZWwNId9n42LOel6KLpgrDqJVekTIdYqZi6fbeBs7gmF5gAnnsNsJe4JU3j9K6293Ex0x9XfkfhkjvZBrKCqYAfZbxgFpHUpspVZCuwAiSKWXzs/s512/Screen%252520Shot%2525202012-05-05%252520at%2525203.59.09%252520PM.png" /></a><br />
If you just want to watch a video, you can look at this embedded below.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/RIOgPPbHNjk?feature=player_embedded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Enjoy!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-42934782924938461572012-05-05T12:13:00.001-07:002012-05-18T09:17:56.314-07:00Elegant layout and amazing browsing experience with FlipboardFlipboard has one of the most elegant layout and browsing experience of any other app I tried.<br />
<br />
<a href="http://goo.gl/photos/1QsC35prXv" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bsYxNeK4alg9sXZQ-Nlqtx2nslIvu4nmJ9jc8G5xr-WXqnWIeAp9IW4aslxPAdVhIFkT8JkwJd8tsBs__9AYFNGBbipQ7k3fJmiRJwfUyCWdjJfpcinuUqLYSQ6YedOVlevVkEOxBIA/s512/Photo%252520Aug%25252007%25252C%25252011%25252038%25252029%252520PM.jpg" /></a><br />
<br />
<div class="separator" style="clear: both; text-align: left;">
I was amazed how information looks more interesting when laid out in a tabloid format rather that in a table. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://goo.gl/photos/y3mRuhNCAZ" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em; text-align: -webkit-auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDu4u3uM45vP3Zdo7fQCsDRgpRPlxCHTpG47CaVQIf6Y81N6c8EWPDsb4Xdpilv5ELvYZC984_WE90I7acFzrsyyjqooG7YQACNhOM6vEl1YVpHGP2gtpaIGjGVectzcwnXC338NwlDo/s512/IMG_2917.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Most of the magic is in the interaction. The transition between pages simulates flipping the pages of a book.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://goo.gl/photos/oJrfdBmsyF" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em; text-align: -webkit-auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNoLsCeGYNJBOSQJ2fP3GmqL0QemjIEiIVEZLFk2HmC8vtrbU4b9QVuKsb5dlxMOhaX16bvj4hNnbsujQ6FWYgg7nuJg-U-8KV4g3FeMVztdkN1OJeeOdjmyO8UClq98xeiHsYVe_ir_A/s512/IMG_2920.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I suggest watching this video to get a sense for yourself.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/v2vpvEDS00o?feature=player_embedded' frameborder='0'></iframe></div>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-89631198919713793232012-05-03T04:37:00.002-07:002012-05-18T09:18:13.076-07:00Layered navigation: an emerging design patternLayered panels to represent navigation to previous levels. This is one of the design pattern that seem to be emerging on the iPad platform. On the bottom layer user can pick different list to view (e.g. timeline, mentions etc.)<br />
<br />
<a href="http://goo.gl/photos/ml8qjPqLtn" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS2b9sdr6_I2mMrKrVKAAlL7fDrWHaoIytazd0xVX767yRRK9I3TjyS4dDPI6C-3EP6HNZT2zdbQagdjsgOBKojJC8cen4O81rHt41IOcuyG7Ze7kL9zyNJbyB1y2VgX-IYJ5RVBKipbA/s512/Photo%252520Aug%25252008%25252C%25252010%25252039%25252042%252520AM.jpg" /></a><br />
<br />
It is interesting how the bottom layer minimizes to display the icons only when the third layer is opened.<br />
<br />
<a href="http://goo.gl/photos/y1eMS8wTZC" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfO8TW_NIWefY-TgKdT3475SdM1zOcBnAABWiqxeIHT4b0Aa9bm27EPZA6tEASzOtKHiJjYLsS3zcXX71l_gm-ehYkEudeYtdN2qSltvPdr7nszz-XSu16-tPaly90VSkqibl1g2yMr6M/s512/Photo%252520Aug%25252008%25252C%25252010%25252040%25252015%252520AM.jpg" /></a><br />
<br />
Middle layer displayed a list of entry, while the top layer display the content of one of the entry. You can move the the detail top layer a little bit to the right to get a better view of the list view<br />
<br />
<a href="http://goo.gl/photos/wS3OQorMCE" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOvqDjdjwxDgtdyku1OPqOpvtBNoRyzTJ1gPNq_UML7OcQpjqhKssuB-dLr_9bF65CN0s-hFSiPAw6f3dIb8UU1J8eeFe87AfM-N6CnUReHeOjpv94PWvPEIyuVVcyNrAHxINLoQXScYU/s512/Photo%252520Aug%25252008%25252C%25252010%25252040%25252008%252520AM.jpg" /></a>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-74159415411224456942012-05-01T13:22:00.001-07:002012-05-18T09:18:33.181-07:00Visual Tabs Browsing in Windows 8I am a visual person and I love when designer replace text with an image of the actual thing. How about getting back to a browser tab by selecting the view of the page that you want to keep reading.<br />
In the Metro Style Browser in Windows 8 displays the open tabs with a list of thumbnail of the page in a bar on top. The bar doesn't show up and take additional space, unless you tap on the top portion of the screen.<br />
<br />
<a href="http://goo.gl/photos/R3WzlsEr1y" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2w-tzjGgCuEPuPmRExgRcku5RJgYTNgKW_s1iPJRdnIxX-T_bx2QwEiklJxyij0RYuvptlrbB-h5CNAD-0PeKAW_mstDNxiSO4pRYjfkZN3wpQBVy4G8PjvhI-_2IZztzyAJ8PN-bRQ/s512/022.jpg" /></a><br />
<br />
In which case the bar appears temporarily as on overlay over the browser.
<br />
<br />
<a href="http://goo.gl/photos/63VBKRDDZE" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtO7n2ZMf7hM-24wXXpzEnsewYjGVqbBhFk2_MmDuZ3dW7cMN3KwW4BWY3BnoyZDWOt37-ct8J5FWJcF42rf3PaLGqe4uZiC8b0KDob3NhWCaUMgu9Rq_w5EuEnLgxJ-X5lxCKnmM4n94/s512/021.jpg" /></a>Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-69308975534129476892012-05-01T07:45:00.001-07:002012-05-05T11:46:24.106-07:00Pop-out PanelsIn WeatherBug the side tiles pop out of the panel in separate windows when you tap on them.<br />
<br />
<a href="http://goo.gl/photos/XYZHq5XXSp" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-jT-V3zLKq97Q1B6FgjpJrk478wHG2TtzTn7ZUIfESWJzJwBXnS6lAtrClOvVzkJNcxykhKN2DOXq_Cs97JTSoHxrmubcG8K5ey7-AVH2GqH9mVhB22Hw_iLcoXDkBCc4_KQST8HFXR0/s512/Photo%252520Aug%25252008%25252C%25252010%25252042%25252023%252520AM.jpg" /></a>
<br />
<br />
When you tap outside the window, this gets back in place. this is a clever design to provide a glimpse of information in place, without taking too much space, but provide a simple way to expand in a larger area on demand.
<br />
<br />
<a href="http://goo.gl/photos/fEFzWiI9Ub" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwXrN24RKwrjszARnfdnkKVJDwnBlHwzYIeivj8ltRm_ecF5pUOPC6XaiLHPIq1lf74nGVApfxzjtGK__TC3MgUnEmU-Z42AHsGZioBLMytUfSDwiDymnpdFl1U6EgXOhkhno67K49tI/s512/Photo%252520Aug%25252008%25252C%25252010%25252042%25252017%252520AM.jpg" /></a>
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0tag:blogger.com,1999:blog-7727946596112880413.post-12570757609893163902012-04-30T07:17:00.000-07:002012-06-28T13:55:48.821-07:00Interesting App DesignFew interesting elements in this list. Active tab and tab with notification (?). Item with items in a list. The hierarchy is done by right aligning the icon on the top item (Alexander), while left aligigning the icon in the sub item. Background color also help to distinguish among them<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbWJkjCFHt9W_JnRthLoKf7kUaRwH_rszsjuLJhm2Yaf1aUZZmJZ6ifGePHPMGP0DVzcKGtWvo61Cyg3OhPuL-bZ-amJzqFG9GjJ71Nv4x0YjabOXPL079mUi9N-D4LhK3gaLnN_xQmBc/s823/1000001561.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbWJkjCFHt9W_JnRthLoKf7kUaRwH_rszsjuLJhm2Yaf1aUZZmJZ6ifGePHPMGP0DVzcKGtWvo61Cyg3OhPuL-bZ-amJzqFG9GjJ71Nv4x0YjabOXPL079mUi9N-D4LhK3gaLnN_xQmBc/s823/1000001561.jpg" width="500"/></a><br />
<br />
Also I found interesting their solution for tabs with options (see star and search tabs).<br />
This is how they look like when expanded.<br />
Also interesting the toolbar of actions applied to a single element.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0eOxvH-Fz6ZYiwaY3fXSRyVF0AueNifixiFmKNfLUNlJdu4dQZ8khwC2KwYDQl5J1PAUTA91rVZAz5J6JbIC6oOhcp1QNOsD3m6CJdfj9feHkbd3VUwPb6kQIWbNiTtzWQ_7nHHtgpP8/s469/Photo+Aug+08%2C+10+38+40+AM.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0eOxvH-Fz6ZYiwaY3fXSRyVF0AueNifixiFmKNfLUNlJdu4dQZ8khwC2KwYDQl5J1PAUTA91rVZAz5J6JbIC6oOhcp1QNOsD3m6CJdfj9feHkbd3VUwPb6kQIWbNiTtzWQ_7nHHtgpP8/s469/Photo+Aug+08%2C+10+38+40+AM.jpg" /></a><br />
I like the visual design for the tabs. I also like how did they layer different type of information but maintain a clean and scannable design. Love the visual design in general.Anonymoushttp://www.blogger.com/profile/14882036264064645056noreply@blogger.com0