My First Day with Microsoft Surface

A 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...

Read more »

Follow Along Tutorials

Adobe 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. 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. When a tutorial first introduces a feature it often point to its location in the interface. 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...

Read more »

Google Now on Jellybean

What 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. 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. When you are close to a bus stop or a subway station Google Now tells you when the new vehicle will arrive. 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. When you have a calendar appointment Google now will tell you...

Read more »

Jellybean new search UI

Jellybean 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. 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. 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. In a way Google was already experimenting with a similar approach in their new search "what do you love" But this is not all. Searching is getting smarter using your current location to provide results that better fit your needs. Searching...

Read more »

Metro Style UI on the iPad

I am very intrigued by the new Metro design introduced by Microsoft, and I was excited to experience it on the iPad.Track 8 is a gorgeous Metro music app with nice graphics, a clean layout, and smooth animations between menus.Track 8 displays songs by artists, albums and playlist, and it shows best if your songs all have album artwork. Less impressive, but still interesting, is FlickStack: a photo browsing app for Flickr and 500px photos.The style adopted by FlickStack is a mixture between iPad and Metro style. Below an image of the home screen. When in portrait orientation the left navigation is collapsed and the picture tabloid takes the full screenThe images of a selected stream are displayed in a even grid, which I found visually less interesting....

Read more »

Parallel Browsing Across Categories

Amazon 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. Tapping on any of the top level category drills down to subcategories. The example below display the subcategory for Electronics. When searching for an item, all categories that contains search result will display and user may drill within the filter...

Read more »

Faceted Search Sliders

While looking for interesting designs I stumbled upon whichbook.net, 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. Can you do better? Guess what: I ended up buying a book! :...

Read more »

Thumb Reach Area on Smartphones

Luke Wroblewski in his seminar, Designing Mobile Web Experiences, 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. Devices used in landscape orientation are usually operated with two hands, and the reach zone is significantly different. While listening to Luke's explanation I realized I have always seen this, but somehow my brain never registered the observation. Few popular iPhone apps, took this lesson to heart and opted for a custom tab navigation bar, placing the main action...

Read more »

Dealing with Hidden Gestures

Our 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. Multi-touch gesture is a powerful new way to express input, but how can an app overcome the discoverability challenges? In this article I am listing few solutions I have run into and few thoughts about their pro and cons. Help window. Some app, as ArtRage, display all available gestures in a separate window or pop-up invoked from a traditional help button. The advantage is that I can get help when I need it. The disadvantage is that I may never open the help to discover that multiple...

Read more »

Pan, Zoom and Transform in SketchBook Express

I was playing with SketchBook Express on my MAC today, and I found the transformation and pan/zoom widgets intriguing. Transformation Widget 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. 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...

Read more »