Quip is a Twitter app for iPad with a special focus on streamlining and condensing your timeline, especially when it comes to conversations. Great App!

Specctr supercharges Adobe Fireworks by automating spec generation. With the capability to spec dimensions, color, font, spacing, and more, Specctr enables design and development teams to collaborate more accurately, efficiently, and effortlessly.

How To Design Technology So It Becomes Natural:
Steve Clayton talks about the drive at Microsoft to embrace what he calls ‘natural user interface’. Clayton, who says his job is to find out what amazing projects the tech firm is working on and share it with the world, takes us through a future-forward vision where gesture, sound and artificial-intuition creates a world that extends the possibilities of our creativity.

Leap represents an entirely new way to interact with your computers. It’s more accurate than a mouse, as reliable as a keyboard and more sensitive than a touchscreen. For the first time, you can control a computer in three dimensions with your natural hand and finger movements.

A nice litte video How to prototype and influence people or checkout the Slideshare

The Reinvention of Reading and Interactivity

Article Source: Click Here

The invention of the tablet PC has created a new medium for book publishing. Interactive books are everywhere, and have revolutionized the way people consume the printed word. With the recent software available to allow easy creation of interactive books and with the race to bring these products to market, there seems to be a more and more dilution of quality and a loss for the meaning of interactivity. When publishers create new eBook titles or convert a traditional printed book to a digital interactive eBook, they often miss the added value this new medium can provide.

It’s important to understand the distinction between apps and eBooks, as it’s something that often confuses both publishers and consumers. It basically comes down to formats; apps are mostly native iOS orAndroid software, whereas eBooks are documents of a particular format, such as the open standards EPUB and Mobipocket (.mobi). And eBooks can be further distinguished from “enhanced eBooks,” which use formats such as ePUB3 for iBooks (Apple) and Kindle Format 8 (KF8) for Kindle Fire (Amazon).

eBooks were the first to appear on devices such as the Kindle, and have very limited interactivity. You are mainly able to flip the pages, search for content, or highlight words to see a dictionary definition. These devices also allowed font size to be increased to enable visually impaired readers enjoy books more easily. This gave publishers the unforeseen benefit of regaining a large population of users who couldn’t read printed books.

Enhanced eBooks (ePUB3) are a new digital publication standard that allows easy integration of video, audio, and interactivity. I expect this format to advance the future of textbooks and other educational material. Future textbooks might be able to “read themselves” with audio narration, perhaps preventing students from actually reading. But the benefits outweigh the downsides; for example, the new text books might also offer the ability to make and share annotations without destroying the book, interactive self-tests throughout the chapters, and generally a much more enjoyable learning experience.

Apple has recently released iBooks Author, a free eBook creation software that lets anyone with a Mac to create iBooks textbooks, cookbooks, history books, picture books, etc. iBooks Author generates a proprietary format for books that will only be available for sale on Apple devices. Adobe has also made available a Digital Publishing Suite via InDesign for the iPad, Android, and Blackberry platforms. Mag+ and Moglue are two other independent publishing platforms that are worth mentioning.

This video was released by Apple to promote the iBooks Author:

Interactive eBooks is a category for apps designed specifically to utilize the powers of tablets to enable users to interact with the storyline in sight, sound, and touch. I like to think of interactive eBooks as an evolution of the printed book with added interactivity in order to create an experience beyond the printed format. Examples of interactive eBooks include pop-up book apps for kids, interactive travel guides that utilize the device GPS capabilities, cookbooks with built-in timers and video recipes, or any traditional book that now uses the tablet to enhance the experience with interactivity.

Grimm’s Rapunzel ~ 3D Interactive Pop-up Book

On a touch device, interactivity is the ability to engage with the user interface, including the ways you move your fingers on the screen, the way you to select an app, or how you browse the Web. Interactive eBooks are, by definition, an enhanced book-like experience that have a different core premise than other types of apps (with the exception of games perhaps). Whereas in most applications, interactivity focuses on menu navigation and interaction with the user interface as means to achieve a goal (view an image, find an address, read an email), interactive eBooks provide interaction with the content and storyline, and therefore offer a unique experience each time. A good example of is Richard Dawkins’ The Magic of Reality, where you interact with the storyline through interactive demonstrations and games that allow you to get hands-on with the science discussed in the book by, for example, letting you simulate the effects of heat, pressure, and gravity on different states of matter.

The experience of interactive eBooks should not be confined to animations based on touch-and-response interaction, or merely flipping the page; when designing these Books one must ask what is the enhancedexperience—why to move from print to digital, and how to create value and fun.

Interactivity for the Sake of Interactivity

If a book app does not use interactivity in order to enhance the reading experience, it does not belong in the interactive eBook category. In the race to bring interactive books to market, some of the books have only featured very superficial interactivity—what I call “interactivity for the sake of interactivity”—where, for example, touching an image activates a simple animation such as making a butterfly fly, or a tree drop leaves to the ground. These interactive experiences do not add value to the story, and are therefore somewhat meaningless.

There are a few exceptions where this type of interactivity is actually a success. For example. one of the first books published as an interactive app for the iPad was Alice in Wonderland. This book was a phenomenal success though offered nothing but eye-candy interactivity. When the app was first published, the reviews called it "a reinvention of reading” that made clever use of the accelerometer to make Alice grow as big as a house or to throw tarts at the Queen of Hearts and watch them bounce. Although these activities through the 52 pages of the book are fun, I think they distract from the actual story. The reason this book was such a success is due its having been published when the iPad was fairly new, and touch interactivity was still an exciting experience.

Another book that was fairly successful at the time was The Pedlar Lady of Gushing Cross, which offers narrated animation with very basic interactivity, but was considered revolutionary when it came out because reading the story while seeing the animation unfold was definitely an enhanced experience to the young reader. However, this book did not offer any real value through interactivity, and might as well be classified as a short animated movie. The limited interactivity of seeing letters animate while you tilt the device was merely a gimmick, as you can see in the video below

Cozmo’s Day Off is an interactive eBook that was on the top-seller list for many months, and is packed with interactive elements that made it a great success. It contains over 100 unique audio and animated interactions. However, this app would be better characterized as a game for young kids and not as an interactive storybook because the story seems secondary to all the bells and whistles, and it’s written in style not intended for young audiences. But perhaps this is a case where interaction simply for the sake of interaction can be the whole point of a book.

The image below shows all of the hotspots that trigger an animation sequence for one page of the book:

Interaction for Value

It is possible for interactivity to go beyond the superficial, to add value to the book and create an experience that would be impossible in print. Here are a few examples of such cases.

Al Gore’s Our Choice is a great example of how meaningful interactivity creates an engaging and fun learning experience. With clever use of interactive infographics, animations, documentary videos, and images, this book is a great example of what the future has in store for digital publishing.

The Martha Stewart Cookies iPad app is a wonderful example of an interactive recipe book. Besides just offering great recipes, it also allows you to search recipes based on ingredients and cookie type to find the perfect cookie for your needs. For example, you might use the app’s search wheel (below) to look for bars and biscotti-type cookies with oatmeal as the main flavor component. This is a great added value because this type of interaction is unmatched in print.

Paris: DK Eyewitness is probably the most complete travel guide you can find for the iPad. It features beautiful cutaways of buildings that can be explored by tapping and zooming, complete offline maps for all the central districts of the city, interactive city and park walks with “hotspots,” and extensive listings of the best sights relative to your current location. No more searching aimlessly for your location on a map or looking through index pages; the interactive app shows what’s around you within walking distance, making the iPad a must-carry on in your travel bag for an experience unparalleled in a traditional travel guides.

Bobo Explores Light is an educational experience for young adults. It puts a fully functional science museum in the palm of your hand, teaching you about lasers, telescopes, lightning, reflection, bioluminescence, and sunlight. This is great example of using simple interactivity to explain relatively complex topics through science experiments that you can actually perform on your iPad. Bobo, a friendly robot, serves as a guide, taking the young reader through space, land, and sea, to learn all about the science of light.

In my book, Timor the Alligator, kids participate in the story by picking toothpaste and helping Timor brush his teeth. This story could not have been told in a printed book because, without the use of interactivity, young kids would not be able to visually understand that brushing actually helps keep a clean mouth. The simple process of choosing a toothbrush, adding toothpaste, and brushing Timor’s teeth until they turn white serves as an educational experience for preschoolers and toddlers reading the book.

With the Numberlys app, kids (and adults) learn about the alphabet through a series of fun interactive games. This book probably has the most spectacular visuals I’ve seen to date. Its aesthetic is inspired by Fritz Lang’s silent film, Metropolis, so the app offers a unique cinematic experience and gameplay to engage users to learn about the (fictitious) “origin of the alphabet.”

As you can see from these examples, interactive eBooks are no longer just about a touch-to-animate type of interactivity, nor simply the touch interface controls. Rather, they are about adding value through interactivity by using the full capabilities of a touch device to engage the user and enhance the learning and reading experience. These engaging experiences are what I call a true reinvention of reading.

The $144,146,165 Button

Article Source: Click Here

Genius move by the cabs.

The average New York City taxi cab driver makes $90,747 in revenue per year. There are roughly 13,267 cabs in the city. In 2007, NYC forced cab drivers to begin taking credit cards, which involved installing a touch screen system for payment.

During payment, the user is presented with three default buttons for tipping: 20%, 25%, and 30%. When cabs were cash only, the average tip was roughly 10%. After the introduction of this system, the tip percentage jumped to 22%.

Those three buttons resulted in $144,146,165 of additional tips. Per year. Those are some very valuable buttons.

Pixels ( Vector / Raster )

Article Source: Click Here

In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific sizes. Several people asked me why I had done this instead of including a vector graphic, and the reason is actually extremely important. This is something everyone should know, especially people who are not designers.

Most icons and logos are stored in vector image files that specify perfect mathematical representations of their shapes. Unlike JPG and PNG images, vector graphic files don’t tell the computer how to display their contents in pixels; for a vector graphic to be displayed, the computer has to perform a translation from the mathematical vectors into something that can be displayed with pixels.

This translation process is relatively simple: the computer takes vector lines, lays them on top of a pixel canvas, and then fills in each pixel that the lines enclose. The result looks like this:

The S vector path is perfectly smooth because it is defined using math that is not constrained by display technology. The rasterized S has jagged edges because there are simply not enough pixels to faithfully show what the vector lines represent. Display technology is the limiting factor here, and it has been for many decades. To get around the problem, computers use a signal processing technique called antialiasing, which hacks your brain into perceiving more definition than can be displayed on the screen.

A gift from signal processing

Antialiasing repurposes pixels into building blocks that approximate whatshould be displayed on the screen instead of what is displayed on the screen. Instead of filling in boxes (pixels) with “on” or “off” states based on how they are enclosed by vector lines, antialiasing uses some visual and perceptual tricks to get closer to the real mathematical image. The most common trick uses things called half-pixels, which are pixels at the edges of paths displayed at different intensities around shape edges, to mimic the effect of having higher resolution. Here’s what antialiasing with half-pixels does to our S glyph:

As you can see, some of the pixels that were not quite enclosed by the vector path are now displayed as shades of gray. When you zoom out, those different intensities simulate the look of a sharp edge. These half-pixels can fill in gaps that solid “on” pixels cannot. But don’t let this trick fool you; the antialiased S is still not actually sharp. Antialiasing is a hack. It tricks the brain into perceiving a sharp shape when in fact it is looking at a gooey form. This is why reading on Retina displays feels so much better; you’re not looking at blurry shapes.

Until we have Retina displays everywhere, we’re going to have to live with antialiasing techniques. The problem is that computers are terrible at doing it automatically. Because the computer doesn’t know what is in the resized image, it doesn’t know where to optimize using half-pixels. This is why I included manually antialiased images with the Markdown Mark. Look at the demonstration below. The right side of the image shows icons that were automatically antialiased by Photoshop and the left side shows the manually fitted ones I included with the Markdown Mark:

The difference is subtle, but the comparison makes it very clear. There are several major problems with the computer-created icons that leaves them looking blurry and unimpressive. For example, in the transition from 66x40 to 48x30 pixels, the human version drops the border down to exactly 2 pixels but the computer drops it to 2.8 (that’s two solid black pixels, plus one half-pixel at 80% intensity), which gives it an incorrect soft edge. The computer has no way of knowing that the border should always be sharp, so it ignorantly tries to maintain the ratio of the originally-specified image at the expense of sharpness. The result is not great.

Let’s get a closer look so you can see exactly how the problem is presented in pixels on the screen. The top image in the figure below, which was fitted by a human, shows the correct border size of 3 pixels, while the computer-resized image shows 3.3 pixels. Zoomed out, the 30% half-pixel makes the edge look blurry (this is the 66x40 version of the Markdown Mark from above).

Also notice that similar issues occur when computers antialias typography. I pixel-fitted the M glyph to solid edges in my version, while the computer made poor choices in its attempt to maintain ratio at the expense of clarity.

Fitting

Now that you’ve seen the importance of pixel-fitting, you probably want to know how to do it yourself. If you’re not a designer, it’s not entirely straightforward and it requires a bit of patience and knowledge of the vector tools in image editing software like Photoshop. But the process is easy to describe: after you resize a vector image onto a raster plane (like a Photoshop canvas), you should zoom in to the pixel grid and manually refit the paths to pixel edges where it makes sense. In Photoshop, you should use the Direct Selection Tool to select the vector edges and then nudge them slowly until they fit perfectly to the edges of physical pixels. This only really works to sharpen straight lines and to define the furthest edges of rounded paths. To display a curve, you have to use antialiasing because there are simply not enough pixels to show a soft curve on the screen (see the very first, jagged S image above).

Sometimes, the difference is incredible. For example, here is Hulu.com’s logo, taken directly from the website. It is a badly antialiased graphic that is seen by millions of people every day:

The top image is the logo currently live at Hulu.com. The bottom version is a pixel-fitted mockup that I made (I probably overcompensated, which resulted in some lost some detail in the P and S). The difference is obvious. A closer look makes the human changes even more apparent:

The Hulu logo is a gooey, blurry mess that is seen by millions of people every day. Because it is at the top of every page on the entire site, it sets the tone for the quality of the experience. It should have been pixel-fitted.

What this means

Using automatic antialiasing when resizing vector graphics leaves a lot of important decisions up to computer graphics software. While the results are generally decent, they’re not perfect. So, for important icons and logos– really, for all rasterized vector images–you should fit the pixels to the grid and ensure they are as sharp as possible.

We’re slowly starting to see displays with higher pixel densities that can more faithfully reproduce vector paths on the screen, like Apple’s retina displays. But they’re not widespread, and most software doesn’t optimize for those kinds of screens. Until they are commonplace, pixel-fitting is an essential task.