The Listening Cloud. A data-driven light sculpture that visualizes social media conversation in real time. Installed in the lobby of RPA, it is a continuous display of the buzz around client brands. Source

Some design trend data

Great post and data deconstruction. Best viewed from Source

It took a surprisingly long time and about fifteen million get requests to scrape meta data for every upload (as of the end of August ‘13) on Dribbble, the popular design community. I ended up lopping off the first half-year-or-so of activity on the site as the community was growing in fits and spurts and the data were inconsistent and basically all over the place. In sum, my little Heroku-deployed Go app collected information about 638,271 uploads and 3,479,698 taggings, and stored it all in a PostgreSQL database.1

Fig. A: CLICK HERE TO VIEW

In the interest of being a good internet citizen, I rate-limited the hell out of it. Strangely, the scraper looped through the full range of unique upload IDs about a dozen times, and it seemed to pick up a few more uploads each run (albeit only a handful the final time through), which would indicate there was some kind of silent failure occurring. If these numbers seem off or my method seems flawed, I’m interested in hearing about it.

I’ve included the taggings-per-upload ratio in Fig. A to add meaning to the trend data that follows. Since 2010, the average Dribbble upload went from having less than 4 tags to over 6, so an increase in incidence of a particular tag could indicate nothing more than users’ increasingly prolific tagging (i.e. a change in Dribbble usage behaviour, not a trend in web design). I considered normalising the later spark-lines against that increase, but my eyeballing of the data suggests that the increase in tagging coincides with an increase in tags (the size of the tag set increased). There might be a clever way to properly normalise the data to diminish the change in Dribbbler usage and highlight actual data but until I figure that out or somebody emails it to me, be aware you’re looking through a glass darkly.2

The rise of ‘flat design’

Dark glass or not, there are a few striking vistas. The most spectacular is the rise of flat design. The community’s usage of the ‘flat’ tag was a rounding-error above zero until the late autumn of 2012 when it began a rapid ascent. (It’s probably not worth noting that Scott Forstall departed Apple on 29 October 2012 — but you don’t need to be Tim Cook to know which way the wind blows.)

Fig. B: Rise of ‘flat’ on Dribbble,  CLICK HERE TO VIEW

In August of 2013, more than one in every ten Dribbble uploads was tagged ‘flat’. But Fig. Bcharts two trends, really. One is the rise in a style of visual design that’s been called flat, which is typified by a lack of texture, gradient, drop shadow. And the other trend is the propagation of the term ‘flat’ to describe this style of design. Charting related stylistic tags (‘minimal’, ‘simple’, ‘metro’) suggests a trend that’s no less obvious, but perhaps a little less dramatic.

If the conversation within the software design community over the past year is any indication, we might expect the trend in Fig. B to be mirrored by a precipitous decline in the use of skeuomorphism. Of course the word skeuomorphism was really only introduced as a shibboleth among the proponents of so-called ‘flat design’, as a pejorative description of an outmoded look.

Fig. C: ‘Skeumorphism’ on Dribbble,  CLICK HERE TO VIEW

The word ‘skeuomorphism’ was first used as a tag in June of 2011 by Eugene Cheporov (and ‘skeuomorphic’ predated ‘skeuomorphism’ by a couple of months: Joshua Blankenship tagged an upload with itin September of that year). Its use since then has been extremely seldom (peaking in January 2013 with a meagre fourteen taggings out of more than 20,000 uploads), and often self-conscious (the first upload tagged ‘skeuomorphic’ was titled Because there aren’t enough skeuomorphic shots on Dribbble…).

Fig. D: Google Trends,  CLICK HERE TO VIEW

But uploads of the style that came to be pejoratively called ‘skeuomorphism’ were far more prevalent far earlier. Take a look through some Dribbble uploads from 2011: there’s a lot of carefully stitched upholstery, glossy leather, and slickly rendered machinery.3 So I tried to find some related tags to use as a proxy. ‘Noise’ and ‘texture’ both overlap with the style that I would call ‘skeuomorphic’ (not in its proper sense, but the gaudy, drop-shadow-y style it’s come to mean). They also constitute trends of their own (and even overlap with ‘flat’ more than never), so, as ever, it’s a dark glass.

Popular mobile platforms

Fig. E: Mobile computing platforms on Dribbble,  CLICK HERE TO VIEW

It is, I am sure, an extremely significant indicator of the developer ecosystems of the major mobile computing platforms of the moment that iOS is about ten times as popular as Android within the Dribbble design community. In Android’s best month, about one in a hundred uploads were so tagged; in iOS’s, about one in ten. And woe betide Windows Phone, for which there isn’t even enough data to mock.

Read from this what you will; I don’t have the heart for it. But the data is pretty definitive: iOS has the critical mass of designer mind-share.

Type trends

The reason I began this little-big-data adventure was because I had a hunch we’d seeMark Simonson’s Proxima Nova suffer a dramatic decline in usage the moment Hoefler Frere-Jones made available for web-use the typeface for which Proxima so often has been called to mimic, Tobias Frere-Jones’s Gotham. I thought a) the entire project would be reasonably quick; b) it’d make a very satisfying graph; c) glory. Proxima Nova’s use on the web has often struck me as we-want-a-web-font-but-also-want-Gotham. I admit I’ve done the very same once or twice. It’s a poor imitation, but bold and in caps, it ticks a lot of the same boxes.

Fig. F: Sans-serifs on Dribbble,  CLICK HERE TO VIEW

Of course: the data are too subtle for my ham-fisted brain. Gotham’s usage since 2010 is basically in decline. I suppose it’s probably in decline since 4th November 2008. And, again, its decline here is not necessarily meaningful: this may be highlighting changes in the Dribbble community, changes in Dribbble usage patterns, or actual changes in the typeface’s relative popularity. And Proxima Nova does follow the sort of trend we might have expected. It rises, presumably roughly with Typekit’s own usage, and then tapers off much like Gotham, whose coat-tails it supposedly rides.

I’ve included a few other popular sans-serifs to round out the picture. Poor Helvetica, presumably in decline since its Hustwit-driven revival in 2007. Myriad gets surprisingly little attention on Dribbble, considering how much real-world usage it sees. That humanist Open Sans looks like it’s on the way up. There isn’t much data yet, but I imagine in another couple of years we’ll be able to chart it satisfyingly against Freight Sans and extrapolate some far-fetched conclusions about their respective platforms (Typekit vs Google Fonts).

Fig. G: Serifs on Dribbble,  CLICK HERE TO VIEW

My attempt to reproduceFig. F but for serif type families was a complete failure. Fig. G demonstrates just how unsatisfying the data are in this regard. Is serif usage more fragmented? Or less exciting to tag? I suppose people have been (this is just my own hunch, not based on any formal data) using serifs for text and sans-serifs for display type, and Dribbble tends to highlight display text more than nicely typeset paragraphs. Nevertheless, it’s curious.

Pardon our progress

This data took far too long to collect, and far too long to (very amateurishly) analyse. There’s a lot to be improved about the analysis, most of which I’ve mentioned as it’s come up above. Dribbble itself is a limited sample, and the data I’ve collected isn’t normalised against changes in Dribbble’s community or usage patterns. Similarly, I’ve collected all tags on all uploads to Dribbble. It might make more sense to limit our data to uploads or uploaders that have a modicum of credibility (i.e. somehow incorporate the ‘like’ or ‘follower’ counts), or even somehow weigh data-points correspondingly. It might be interesting to chart the spread of tags across the community. (Do tags begin in the periphery and spread inward, or do they begin with the dribbblerati and spread outward?) And finally: is there any way to address the fact that Dribbble uploaders don’t consistently tag in a useful or elucidatory way?

Fig. H: Big (American) holidays on Dribbble,  CLICK HERE TO VIEW

I can nowise claim any kind of even passing statistical know-how, so I’ve uploaded a ~70mb CSV to Github. Please do fork, analyse, graph, chart, blog, correct, augment.4 That beautiful and meaningful chart I was fantasising about (with the rise of ‘flat’, decline of ‘skeuomorphism’, resurgence of ‘Gotham’, and short-lived reign of ‘Proxima Nova’) didn’t quite materialise. But I’m reasonably happy with Fig. H.♦

Source

Full Turn: 3D Light Sculptures

Full Turn is a kinetic light sculpture by Benjamin Muzzin created as a diploma project for his bachelor degree at ECAL. The piece was constructed from two flat screen monitors placed back-to-back and spun at extremely high speed resulting in three-dimensional light forms that hover in thin air. Of the work he says:

With this project I wanted to explore the notion of the third dimension, with the desire to try to get out of the usual frame of a flat screen. For this, my work mainly consisted in exploring and experimenting a different device for displaying images, trying to give animations volume in space. The resulting machine works with the rotation of two screens placed back to back, creating a three-dimensional animated sequence that can be seen at 360 degrees. Due to the persistence of vision, the shapes that appear on the screen turn into kinetic light sculptures.

Music by Montgomery Clunk. (via Prosthetic Knowledge, Creative Applications)

Source

Infinite Scrolling: Let’s Get To The Bottom Of This

Infinite scrolling promises a better experience for users. However, the good is often accompanied by the bad and the ugly. Once weunderstand the strengths and weaknesses of infinite scrolling, we can begin to use it to enhance our interfaces.

Human nature demands hierarchy and structures that are easy to navigate. But infinite scrolling sometimes leaves users feeling disoriented as they travel down a page that never ends.

The Good

Long lists are not new, but the way in which we scroll these lists has fundamentally changed since the arrival of mobile interfaces. Due to the narrowness of mobile screens, list items are arranged vertically, requiring frequent scrolling.

Infinite scrolling is highly trending as an interaction behavior on pages and lists. The basic functionality is that, as the user scrolls through content, more content is loaded automatically. With the popularity of social media, massive amounts of data are being consumed; infinite scrolling offers an efficient way to browse that ocean of information, without having to wait for pages to preload. Rather, the user enjoys a truly responsive experience, whatever device they’re using.

Pagination versus infinite scrolling (Large version)

Websites with lots of user-generated content today are using infinite scrolling to handle content that is being generated every second. By unspoken agreement, users are aware that they won’t get to see everything on these websites, because the content is updated too frequently. With infinite scrolling, social websites are doing their best to expose as much information as possible to the user.

Twitter integrates infinite scrolling effectively. Its feed fits the criteria: a large amount of data (tweets) and a real-time platform. From the perspective of the user, all tweets are equally relevant, meaning that they have the same potential to be interesting or uninteresting; so, users will often scroll through all of the tweets in their feed. Being a real-time platform, Twitter is constantly being updated, even if the user leaves their feed unattended. Infinite scrolling seems to have been created especially for websites like Twitter, which successfully employs the technology.

Infinite scrolling appears to have found its niche on the Web. However, there are also drawbacks that must be considered before assessing its value.

The Bad And The Ugly

With so much data to browse, users must stay focused on the information they are searching for. (Remember about being goal-oriented?) Do users always want a never-ending stream of data? Analytics show that when users search for information on Google, only 6% advance to the second page. So, 94% of users are satisfied with receiving only 10 results, which suggests that users find Google’s ranking of results to be relevant.

TO CLICK OR NOT TO CLICK

Google has implemented infinite scrolling for image search results but has yet to implement it for its general results. Doing so would eliminate the need for users to click to reach the second page. Google will probably maintain pagination because this pattern is quite symbolic for its brand. If it does switch to infinite scrolling, when would users typically stop scrolling? After 20 results? 50? When does an easy browsing experience become more complicated?

Looking for the best search result could take a second or an hour, depending on your research. But when you decide to stop searching in Google’s current format, you know the exact number of search results. You can make an informed decision about where to stop or how many results to peruse because you know where the end is. According to studies conducted in the field of human-computer interaction,reaching an end point provides a sense of control; you know that you have received all relevant results, and you know whether the one you are looking for is there or not. Knowing the number of results available provides a sense of control and helps the user make a more informed decision, rather than be left to scour an infinitely scrolling list.

Pagination is a barrier of clicks. (Large version)

When items are distributed across Web pages, they are framed and indexed and have a start and end point. The information is presented clearly and orderly. If we select an item from a paginated list and are taken from that page, we know that clicking “Back” will return us to that page (probably to the same scroll position). Our Web search will continue right where it left off.

If you scroll the same list of results with infinite scrolling, you are left without that sense of control because you are scrolling through a list that is conceptually infinite. Let’s say you count yourself among the 94% who stop reading after the first page (i.e. 10 results) of a Google search. When the list scrolls infinitely, there is essentially no end to the first page. Rather than look for the end of the page, which doesn’t exist anyway, you decide to stop scrolling at the 10th item. This poses a problem with infinite scrolling, because the 11th item is directly in sight. With a paginated list, on which you wouldn’t see the 11th result, deciding not to continue browsing is easier. However, when the next results are already there,you’d probably just keep on scrolling and scrolling.

As Dmitry Fadeyev points out:

“People will want to go back to the list of search results to check out the items they’ve just seen, comparing them to what else they’ve discovered somewhere else down the list. Having a paginated interface lets the user keep a mental location of the item. They may not necessarily know the exact page number, but they will remember roughly what it was, and the paginated links will let them get there easier.

Not only does the infinite scroll break this dynamic, it also makes it difficult to move up and down the list, especially when you return to the page at another time and find yourself back at the top, being forced to scroll down the list once again and wait for the results to load. In this way the infinite scroll interface is actually slower than the paginated one.”

— Dmitry Fadeyev, When Infinite Scroll Doesn’t Work

When Infinite Scrolling Fails

The best companies are constantly testing and studying new interactions with their users. Increasing numbers of these studies are showing that infinite scrollingdoes not resonate with users if it does not support their goal on the website.

TEMPTATION

When you’re looking for that perfect search result and are tempted to continue scrolling into a wasteland of irrelevant results, time is wasted. Chances are that the best result will appear in the first 10 items. Therefore, infinite scrolling merelytempts you to continue reading, wasting time and decreasing productivity in the process.

OPTIMISM

Even more annoying is that scroll bars do not reflect the actual amount of data available. You’ll scroll down happily assuming you are close to the bottom, which by itself tempts you to scroll that little bit more, only to find that the results have just doubled by the time you get there.

EXHAUSTION

Infinite scrolling overwhelms users with stimuli. Like playing a game that you can never win, no matter how far you scroll, you feel like you’ll never get to the end. The combination of temptation and optimism play a big role in exhausting the user.

POGOSTICKING

Infinite scrolling often causes your position on the page to get lost. “Pogosticking” happens when you click away from an infinitely scrolling list and, when you return by clicking “Back,” are brought to the top of the previous page, instead of to the point where you left off. This happens because the scroll position is lost when you navigate away from an infinitely scrolling page, forcing you to scroll back down each time.

LOSS OF CONTROL

Infinite scrolling leaves you with the feeling that you might be missing out on information. You continue scrolling because the results are right there, but you feel overwhelmed because you’re losing control over the amount of data being shown. There is something nice about defined pages on which the amount of content is quantified, where you can comfortably choose whether to click to view more or to stop. With infinite scrolling, you don’t have control over the amount of data on the page, which becomes overwhelming.

DISTRACTING

Etsy, an e-commerce marketplace, implemented infinite scrolling, only to find that it led to fewer clicks from its users. Infinite scrolling was unsuccessful because users felt lost in the data and had difficulty sorting between relevant and irrelevant information. While infinite scrolling provided faster and more results, users wereless willing to click on them, defeating its very purpose.

Etsy’s home page (Large version)

UNREACHABLE

Have you tried reaching the footer of Facebook lately? The footer block exists below the news feed, but because the feed scrolls infinitely, more data gets loaded as soon as you reach the bottom, pushing the footer out of view every time. Footers exist for a reason: they contain content that the user sometimes needs. In Facebook’s case, the user can’t reach it. The links are repeated elsewhere but are harder to find. Infinite scrolling impedes the user by making important information inaccessible.

Facebook’s auto-loading news feed makes the footer unreachable. (Large version)

Footers serve as a last resort. If users can’t find something or they have questions or want more information or explanation, they often go there. If they don’t find it there, they might leave the website altogether. Companies that implement infinite scrolling should either make the footer accessible by making it sticky or relocate the links to a sidebar.

NOT EXCLUSIVE

Pinterest does not have a footer at all, which makes sense given the problem we just saw with Facebook. Through infinite scrolling, Pinterest emphasizes its profusion of data, an endless sea of inspiration taken from all over the Web.

Pinterest’s ocean of pins (Large version)

Images are faster and easier to scroll than text, so Pinterest and Google Images succeed with infinite scrolling to an extent. However, billions of images are on the Web, and users would prefer to see only the best of them. There is something to be said for exclusivity, which seems to be lacking in Pinterest’s layout.

Limiting the number of images on Pinterest’s home page, with an “Editor’s picks” or “Most popular” list, might make the website more appealing. How exclusive can a pin be when a ton of other similar pins are next to it?

Pinterest’s tactic of using infinite scrolling for its plethora of data suffers because itoverwhelms users. The collection looks bottomless, but its immensity is somewhat daunting, and browsing it might seem a waste of time. Ultimately, Pinterest is trying to expose users to infinite inspiration, but that actually undermines thehuman need for control. The amount of data becomes intimidating, and users are left with mixed feelings.

When Usability Wins

As mentioned earlier, Twitter integrates infinite scrolling effectively. The user sees an infinitely growing list of tweets and can comfortably click on a tweet to expand it in place, preventing the page from refreshing and, as a result, maintaining their scroll position.

Twitter’s torn feed (Large version)

On its mobile version, Twitter even adds a “torn paper” marker, indicating to the user where to resume reading. This subtle and simple solution enables the user to scroll up and down the list, while having a recognizable point to return to. Psychologically, that marker reassures the reader by dividing read and unread content. Such markers give the user a sense of control and a better perception of the content’s depth and how far they’ve gotten into it.

Twitter is not the only one. Discourse, an emerging discussion platform, also has infinite scrolling that empowers the user. The company considered the importance of infinite scrolling to its user experience and implemented an intriguing and unique progress indicator. The indicator appears when needed and remains in view (without interfering) while the user reads the content. The indicator numbers the item currently being viewed out of the total number of items. This is a great way to make the user feel in control, even with a lot of data.

The smart progress indicator on Discourse (Large version)

GO HYBRID

A hybrid of infinite scrolling and pagination is also a good option in many cases. With this solution, you would show a “load more” button at the end of a preloaded list, which, when clicked, loads another batch of items onto the list. The same behavior that infinite scroll does automatically, this button does on demand. The interface gains some of the advantages of infinite scrolling, without some of its drawbacks.

Because infinite scrolling requires the website to fetch so much content, the hybrid solution is used at times to control the data load. In Facebook’s news feed and Google’s image search, the infinite scrolling is automatic at first but becomes on-demand once a certain number of items have loaded. This maintains the interface while limiting the load on the server.

Hybrid infinite pagination on Google Images (Large version)

Infinite Pages

Infinite pages take the concept of infinite scrolling to a new level. Websites that employ this concept are “one-pagers.” To remove the barrier of clicking to the next page, the designer turns the entire website into one long scrollable page. Examples are Unfold and Lost World’s Fairs.

On these one-page websites, the sections are spread vertically, one after another. This makes the whole website less comprehensible — hence, less accessible. These websites might not have infinite scrolling, but the user might still have that feeling of a never-ending page.

On infinite pages, the height of each section will vary according to its contents. Although the approach can make for some creative interactions, it can leave users disoriented and unsure where to scroll for the next piece of information. The scroll bar is hidden on many such pages, leaving users feeling lost as they unconsciouslylook for the scroll position to track their progress. Hidden scroll bars deprive users of that chance for rescue. Users shouldn’t be left helpless; the interface should clearly show them how to navigate the page.

Not knowing where they stand can leave the users disoriented.

UX engineers need to take extra care when designing infinite pages. They must take into account accessibility; tell users where they stand by showing the length of the page and how much they’ve viewed. Solutions could include a fixed menu, a map of the page or a scroll progress bar.

Another trick is the parallax effect, whereby different layers on the page move at different speeds according to the user’s scrolling, creating the illusion of depth (as seen on Andrew McCarthy’s website). While it can help to create beautiful andinnovative experiences, it is sometimes heavily overused, and users can get confused by how much they need to scroll for more content. When the parallax effect is combined with animation, the user can get confused about whether the page is being scrolled by their movement or is moving autonomously. It’s wise to use the technique to enhance content, not as the content itself.

Let’s Get To The Bottom Of This

Infinite scrolling can be an innovative feature that greatly improves an interface by exposing content and making performance more efficient. But it needs to be used correctly.

Avoid the following sinkholes to achieve a strong infinite scrolling experience:

• Users want immediate access to exclusive data.
  Users don’t want to be left to explore all of a website’s data on their own. When implementing infinite scrolling, identify what data is exclusive to your website and elevate it to the top of the page, and filter less relevant information.
• Users want to feel in control.
  Infinite scrolling sabotages that feeling of control. Add a smart progress indicator, a fixed menu or a map.
• Users often look for landmarks when scrolling.
  When scrolling through long lists, users expect to be able to easily distinguish between new and viewed data. Add landmarks along the interface to keep users oriented.
• Consider conventional pagination or a hybrid solution.
  Good old pagination is always an alternative to infinite scrolling. And if that doesn’t fit the context, then a hybrid solution, using a “load more” button, could greatly enhance the interface.
• Provide interesting content without an ambiguous interface.
  Having to traverse a never-ending list is logical only if the user leaves feeling that it was worthwhile.
• Users often expect a footer.
  If footer-type information is functional to the interface, then it should appear at the bottom of the page. A fixed footer is usually the way to go with infinite scrolling.
• An infinite list is still a list.
  Infinite scrolling still needs to meet common interface standards. Whether users take their eyes off the screen for a moment or click a link and then click “Back,” they expect to return to the exact point where they left off. Whatever your interface, make sure it meets users’ expectations.
• Effects are nice to have but not a must.
  Many infinitely scrolling interfaces have various effects to show more data (whether by sliding in new content or another method). Be mindful not to focus more on effects than on presenting data in the most effective way possible.

USE IT CORRECTLY

Users are goal-oriented and find satisfaction in reaching the end of their exploration. To be effective, infinite scrolling has to account for this. Nothing is really infinite, not even these infinitely scrolling lists we’ve looked at. Users should always know where they stand, even when the content has not finished loading. They should know what the total amount of data is and be able to easily navigate the list. Infinite scrolling has to be implemented in the best possible way so that users can always find their way.

Source

Sticky Menus Are Quicker To Navigate

Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges.

Sticky Navigation Defined

Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Although sticky navigation can be applied to any menu, such as the footer or social media buttons, we’ll focus on the main (or primary) navigation of a website. The image below shows the difference between standard and sticky navigation on a mobile device.

Usability Study

RESEARCH CONDITIONS

For the study, I created two test websites that were nearly identical. The only difference was that one of them had standard navigation and the other had sticky navigation. Forty participants were timed in completing five tasks on the first website. Then they were asked to complete five different tasks on the second website. The order of the tasks was alternated between users to balance out the familiarity factor. The websites were tested on desktop machines, and participants were not told the differences between the websites until the end of their session. Data was not analyzed until the testing was completed. The results of the study yielded two interesting conclusions.

1. STICKY MENUS ARE 22% QUICKER TO NAVIGATE

The data from the study indicated that participants were able to find what they were looking for quicker when they didn’t have to scroll back to the top of the page. 22% might not seem like a big number, but it can have a big impact on visitors. According to this data, sticky navigation could cut 36 seconds off of a five-minute visit to a website. Of course, keeping visitors on the page longer is only a benefit if you are enhancing the user experience along with it. Forcing people to dig through a website to find something does not qualify as such.

2. 100% PREFERRED STICKY MENUS WITHOUT KNOWING WHY

At the end of each session, users were asked whether they noticed the difference between the two user interfaces. No one was able to identify it. The changes were subtle, and none of the users caught on because they were focused on completing their tasks. Participants were then asked whether one of the websites felt easier to use. Six of the 40 participants had no preference, but of the 34 that did have a preference, 100% of them indicated that the website with the sticky navigation was easier or faster to use. Many comments along this line were made, such as “I don’t know how the websites were different, but I felt like I was spending a lot less time clicking with the first one.” Such comments indicated overwhelming favor for the sticky navigation.

Desktop Software Navigation Menus

Imagine typing a document in Microsoft Word and having to scroll up to the top of the first page every time you wanted to bold a word or widen the margins. Just the thought of that sounds frustrating. Most desktop software provides access to the entire navigation menu no matter what you are doing in the application. The Web browser is no different; we would find it ridiculous to have to scroll to the top of a website to access the address bar of a browser.

Some Good Examples

Facebook and Google+ recently adopted sticky navigation, but they are among the minority. Of the 25 most visited websites in the US, only 16% currently have sticky navigation. Below are some examples of other websites that do an excellent job of pulling this off.

Fizzy Software
This is a perfect example of horizontal sticky navigation at the very top. Everything feels comfortable while you’re using the website.

Web Appers
The navigation here is vertical and on the left, somewhat resembling Google+’s navigation. The only downside here is that if the screen’s height is shorter than 560 pixels, then the bottom portion of the menu could become inaccessible, which was the case when I tested the website on a netbook.

MakeBetterApps
Here is another great example. Making the navigation slightly transparent, giving a hint of the content beneath it, is a nice touch.

Rodolphe Celestin
This sticky navigation spreads all the way across the top, but when you scroll down the page, the design of the menu changes slightly. Simplifying the design like this can be a good technique, as long as it doesn’t feel inconsistent. Also, the designer has taken an increasingly popular approach by making the entire website just one page; the menu links are anchors that bump you down the page. Some nice transitions and hover effects make this website enjoyable to use.

Ryan Scherf
The navigation on this website is vertical and only icons. The creativity here is impressive.

Web Designer Wall
The sticky vertical navigation works well on this website because the menu has only four items. This works well enough for blogs that I wonder why others don’t adopt this approach.

While sticky menus aren’t the most popular form of navigation, more and more examples are popping up all the time.

Getting Started

AVOID IFRAMES

This might seem like a straightforward way to implement sticky navigation, but avoid this method. iFrames cause more problems than they solve, particularly with cross-browser compatibility, security and search engine optimization. iFrames have their place, but they shouldn’t be a major part of your HTML layout.

CSS

CSS is a great way to implement sticky navigation. It also seems to be the most straightforward, most lightweight and quickest to code. The three things to pay attention to are position, margin-top and z-index. Setting the menu’s position tofixed disables the element from scrolling with the rest of the page. This will likely throw off your margins if your navigation is horizontal, so you’ll want to adjust for that. Finally, use z-index with a horizontal menu to make sure the navigation sits on top of everything; this will make the other content slide underneath the navigation as you scroll. Here is the general idea:

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

You will have to play around with the CSS to make this technique work right for your website. Additional information can be found on the W3C’s website.

JQUERY AND JAVASCRIPT

The Simple Smart Sticky Navigation Bar is one of many good JavaScript implementations.

If you would prefer a jQuery or JavaScript solution to a CSS one, then you could try out one of the following options:

• jScroll
• Simple Smart Sticky Navigation Bar
• jQuery Waypoints
• Sticky MenuBar

Many other solutions and scripts are out there. Please include your favorites in the comments below.

What’s The Bad News?

There are many opinions on this topic, and some would argue that sticky navigation isn’t worth it. Here are some things to be aware of.

DESIGN LIMITATIONS

Going with sticky navigation could rule out some design choices that your team might not be willing to give up. For example, the most logical place for horizontal sticky navigation would be at the very top of the page, above everything else. While easy to implement, it might not be what your users need.

DISTRACTING AND INTRUSIVE

If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

MOBILE COMPATIBILITY

Fixed-position CSS and certain JavaScript implementations lack support in some mobile browsers, which is a cause for concern among some developers. The article “Organizing Mobile” by Luke Wroblewski has some great principles to keep in mind when creating navigation for mobile devices. Responsive design techniques also offer some solutions for adjusting the navigation based on the size of the screen.

Be aware of the level of support offered by each device. Knowing compatibility issues beforehand will save you time in the end. When Can I Use? has some interesting information on support for position: fixed. Brad Frost has also done some of his own testing and analysis, providing some interesting insight in his accompanying video.

Conclusion

Why do we Web designers and developers continually force our users to scroll up and down the page in search of the navigation? This is not a problem in desktop software, and we now have the statistics to show the benefits of sticky menus. Navigation on 84% of the top 25 most visited US websites could be made quicker by implementing sticky navigation.

Of course, it’s not appropriate in every situation, especially when real estate is tight. But do seriously consider sticky navigation, while always accounting for usability and the overall user experience.

Source

————————————————————————

Continued Discussion:

Is a website with a Fixed Header good for end-users of a Web2.0 website?

http://ux.stackexchange.com/questions/45519/is-a-website-with-a-fixed-header-good-for-end-users-of-a-web2-0-website

Machine language: how Siri found its voice

GM Voices is nestled on a rolling, leafy road in Alpharetta, Georgia, an affluent suburb of Atlanta. A recording studio specializing in voice-over work, it produces narration for corporate training videos, voicemail system prompts, and the like — not exactly sexy stuff, but steady, and for the best actors, lucrative. September Day is one such actor, and on a morning in 2011, she arrived to begin work on a special project.

Day, a red-headed, 37-year-old mother of three who’s done work for many high-profile clients — companies like MTV, Dominos Pizza, and Nickelodeon — had been given few details. She knew she’d been hired to do a “text-to-speech” product — something where a computer reads text back in human speech — and she knew that she’d be doing her “early ‘20s” voice (she also has a spunky teen voice she’s used for, among other things, an acne infomercial).

WATCH VIDEO: CLICK HERE

Day confidently rolled in having just given birth to her daughter a mere four days earlier (“VO is fantastic —nobody is going to judge me for wearing maternity clothes!”) She wasn’t prepared for what was about to hit her.

Ivona, a Polish text-to-speech company, was creating a computerized voice that would be incorporated into the Kindle Fire, the mini version of Amazon’s popular reader tablet. When Kindle Fire owners clicked a setting, they’d be able to hear some of their books read to them by “Salli.”

For six to seven hours a day, for eight days, Day read passages from Alice in Wonderland, bits of news off the AP wire, and sometimes random sentences, sitting as still in her chair as possible. She read hundreds of numbers, in different cadences. “One! One. One? Two! Two. Two?”

“It was like the Ironman of VO,” says Day. “I had not experienced anything like that. I am the queen of the 30–60 second TV spot. That’s my safe place.” She had to take a break after the fourth day, because she had gone hoarse. But then Day soldiered on, and became the voice of many a breezy beach read.

FOR EVERY SIRI, THERE’S AN ACTOR SITTING IN A SOUND BOOTH, REALLY NEEDING TO GO TO THE BATHROOM

Day’s experience is becoming increasingly common, as talking devices gain a commercial foothold. No longer a novelty, or something marketed primarily to the disabled, speaking gadgets, a la Siri, GPS systems, and text-to-speech enabled apps, are on the rise. It’s easy to see the necessity: when you’re driving you can’t Google, so you ask your phone to find a Starbucks. You’re at the gym; you have your RSS reader reading your financial news to you. Google, Apple, Microsoft, and even Amazon have all invested heavily in speech, and many believe we’re just seeing the beginning of this literal conversation with technology.

Today’s talking phones and cars are almost human sounding. That’s because they are human. Or at least, they once were.

For every Siri, there’s an actor sitting in a sound booth, really needing to go to the bathroom or scratch an itch. Once that person finishes her job, she can go home. But her voice has only begun its journey. The story of that journey, from human to replicant, is one of a series of complex technological processes that would have been impossible 10 years ago. But it’s also the story of our stubborn desire as social beings to form relationships, even with unconscious objects. In order to establish trust in our machines, we have to begin to suspend disbelief. This is the story of how we fool ourselves.

RANSOM NOTE STYLE

J. Brant Ward, the senior director of advanced speech design and development at Nuance, is a former composer who went from writing string quartets on synthesizers to composing speech using synthetic voices. He’s been working in the Silicon Valley TTS industry for over a decade.

Nuance is one of the biggest independent speech recognition and text-to-speech companies in the world. (Speech recognition is a bit like the reverse of text-to-speech — the computer hears what you’re saying, and converts it into text.) The company does many things, including supplying the healthcare industry with voice-enabled clinical documentation, meaning doctors can speak rather than type in their notes. It also develops voice recognition and text-to-speech capabilities for everything from tablets to cars.

THE TEXT-TO-SPEECH INDUSTRY IS EXTREMELY COMPETITIVE, AND HIGHLY SECRETIVE

Ward and the company’s senior design lead, David Vazquez, are part of the team working out of Nuance’s Sunnyvale, CA offices creating next-generation synthetic voices. They describe their work as “part art, part science.”

The text-to-speech industry is extremely competitive, and highly secretive. Even though Nuance CEO Paul Ricci confirmed that Nuance is a “fundamental provider for Apple” at theD11 conference earlier this year, Ward and Vazquez coyly change the subject when asked if the company is behind Siri.

That said, they’ve agreed to explain, at least in broad strokes, how they build voices. Needless to say, one doesn’t start by recording every single word in the dictionary. But when you’re talking about an application that reads any news story that comes into your RSS feed, or looks up stuff on the web for you, it needs to be able to say every word in the dictionary.

“Just say you want to know where the nearest florist is,” Ward says. “Well, there are 27 million businesses in this country alone. You’re not going to be able to record every single one of them.”

“It’s about finding short cuts,” says Vazquez, a trim, bearded man who exudes a laid-back joviality. He rifles through a packet of stapled together papers that contains a script. It doesn’t look like a script in the Hamlet sense of the word, but rather, an Excel-type grid containing weird sentences.

Scratching the collar of my neck, where humans once had gills.

Most of the sentences are chosen, says Vazquez, because they are “phonetically rich:” that is, they contain lots of different combinations of phonemes. Phonemes are the acoustic building blocks of language, i.e.: the “K” sound in “cat”.

“The sentences are sort of like tongue twisters,” says Vazquez. Later, a linguist on his team objects to his use of this expression, and calls them “non sequiturs.”

“The point is, the more data we have, the more lifelike it’s going to be,” says Ward. The sentences, while devoid of contextual meaning, are packed with data.

After the script is recorded with a live voice actor, a tedious process that can take months, the really hard work begins. Words and sentences are analyzed, catalogued, and tagged in a big database, a complicated job involving a team of dedicated linguists, as well as proprietary linguistic software.

When that’s complete, Nuance’s text-to-speech engine can look for just the right bits of recorded sound, and combine those with other bits of recorded sound on the fly, creating words and phrases that the actor may have never actually uttered, but that sound a lot like the actor talking, because technically it is the actor’s voice.

GETTING A COMPUTER TO ASSEMBLE A HUMAN-SOUNDING VOICE IS A HERCULEAN TASK

The official name for this type of voice building is “unit selection” or “concatenative speech synthesis.” Ward describes it as “a little like a ransom note,” but saying it’s like a ransom note, where letters are chopped up and pasted back together to form new sentences, is a radical oversimplification of how we make language.

As humans, we learn to speak before we learn to write. Speaking is unconscious; we do it, we don’t think about how we’re doing it, and we certainly aren’t thinking about the minute fluctuations of stress, intonation, pitch, speed, tongue position, relationships between phonemes, and myriad other factors that allow us to seamlessly and effectively communicate complex ideas and emotions. But in order to get a computer to assemble a human-sounding voice, all of those things have to be considered, a task described by one language professor as “Herculean.”

Take, for instance, the phoneme “A” as in “cat”. It will sound slightly different if it’s the center of a syllable, as in “catty,” versus at the beginning of a syllable, as in “alligator.” And that “a” will also sound a little different if it’s in a stressed syllable, as it is in “catty,” versus a non-stressed syllable, as in the word “androgynous.”

Sentence construction presents other challenges. The simple task of making plane reservations isn’t so simple for a synthetic voice.

“If you’re saying something like, ‘Are you going to San Francisco, or New York?’ the end of the sentence goes up in pitch,” says Vazquez. But if it’s a multiple choice question, say, “San Francisco, Philly, or New York?” then “York” goes down in pitch. Screw stuff like that up, and all of a sudden the user experiences cognitive dissonance (That was weird — oh right, I’m talking to a computer, not a person.)

You shouldn’t think, “I’m talking to a computer.” You shouldn’t think anything at all.

“My kids interact with Siri like she’s a sentient being,” says Ward. “They ask her to find stuff for them. They don’t know the difference.”

DAISY, DAISY, GIVE ME YOUR ANSWER DO

Attempts to synthesize the human voice date back to the 1700s, when scientific inventors experimented with reeds and bellows to get vowel sounds. But the most significant early advance was the Vocoder: a machine developed by Bell Labs in 1928 that transmitted speech electronically, in a kind of code, for allied forces in WWII. The Vocoder was the inspiration for author Arthur C. Clarke’s evil talking computer, Hal 9000, in the book 2001 a Space Odyssey, and a few decades later it produced trendy effects used by pop musicians like Kraftwerk.

EARLY ROBOTIC VOICES SOUNDED ROBOTIC BECAUSE THEY WERE TOTALLY ROBOTIC

In the 70 plus years that ensued, there were many new takes on speech synthesis: Texas Instruments’ Speak and Spell, the Knight Rider-esque talking cars of the 1980s (“FUEL level is LOW!”) and the voice built for physicist Stephen Hawking.

The difference between those voices and the voices of today, however, is as stark as the difference between Splenda and pure cane sugar. These early robotic voices sounded robotic because they were totally robotic. Prior to the late ‘90s, computing power just wasn’t great enough to do concatenated synthesis, where a real human voice is recorded, minutely dissected, catalogued, and reassembled. Instead, you made a computer speak by programming in a set of acoustic parameters, like you would any synthesizer.

“Those machines were simple compared to how complex the human vocal tract is,” explains Adam Wayment, VP of engineering at Cepstral (KEP-stral), a Pittsburgh, PA-based text-to-speech company that has created over 50 different voices since its inception in 2001. “Sound comes from the vocal cords, the nasal passages, leaks through the cheeks, the sides of mouth, reverberates around the tongue, all those tissues are mushy … So the source itself isn’t a neat little square wave. It’s tissue vibrating.”

Hence the synthesizer approach produced speech that was intelligible, but not remotely human. Not even a child would be fooled into thinking they could actually chat with their Speak and Spell.

By the early 2000s, computers finally got fast enough to search through giant databases for the right combinations of new words, allowing companies to start producing natural-sounding concatenated voices. Around the same time, artificial intelligence developed to the point where computers could make increasingly sophisticated decisions with regards to language. When you say the word “wind,” for instance, do you pronounce it the way you would if saying, “the wind is blowing” or “wind” as in “wind the thread around the spool”? An adult human will make the correct determination automatically based on context. A computer must be taught about context.

Robo-voices not withstanding, the promise of text-to-speech has been evident since the dawn of personal computing — Apple even offered a text-to-speech reader in the first Mac. But it was the widespread adoption of mobile technologies and the internet that really fired up the demand for voices. The ability to access information, hands free, is a tantalizing proposition, particularly when coupled with speech recognition technology.

THERE IS ONE GROUP THAT IS SURPRISINGLY NOT PSYCHED ABOUT IT: VOICE ACTORS

You can see how important text-to-speech has become by watching what the tech superpowers are doing. In a letter to shareholders last November, Microsoft CEO Steve Ballmer stressed the importance of “natural language interpretation and machine learning,” that is, the artificial intelligence technologies underlying speech. There have been a flurry of acquisitions: Google bought UK-based speech synthesis company, Phonetic Arts three years ago, and back in January, Amazon acquired Ivona, the Polish text-to-speech firm that recorded Day’s voice for the Kindle Fire.

While the tech sector gets excited about the future of speech, there is one group that is surprisingly not psyched about it: voice actors. That’s right, the very people supplying the raw materials. The reason might be they just don’t understand the implications. Although there are actors, like Day, or Allison Dufty, a voice-over actress who has done many jobs for Nuance, who are willing to speak publicly about their work, those actors are few and far between. Ironclad NDAs keep many actors from associating themselves with specific brands or products. Talent agents who have relationships with technology companies who do this work are often hush-hush, to maintain their competitive advantage. And in the absence of information, paranoia reigns supreme.

“Within our industry, text-to-speech [TTS] is seen as a threat,” says Stephanie Ciccarelli, chief marketing officer at Voices.com, an online marketplace for voice actors, and co-author of the book Voice Acting for Dummies. “They think it’s going to replace human voice actors.”

An email to one successful voice actor who has done narration for Audible books, work for Wells Fargo, NPR, AT&T, and others, got a polite but emphatic response: “The only thing I can tell you about voice actors’ opinion on TTS is that we all pretty much think it’s abominable… Maybe one day it’ll advance to the level that 3D animation is currently in, but right now it’s almost a joke.”

VOICE-ACTIVATED ROACH SPRAY

Back at Nuance, Ward and Vazquez are excited to demo new technologies they’ve been working on. Ward explains that Nuance can weave bits of synthesized speech together with concatenated speech, and make it sound natural, and soon, he says, they’ll be able to make an entirely synthesized voice that sounds good, too. Computing power has increased to the point where it’s possible to build something that doesn’t sound like a totally fake robot voice.

“It will still be still based on a real person’s voice,” he says. Even a synthesized voice needs a model to mimic.

He and Vazquez show me a neat trick where they’re able to take acoustic qualities from one speaker’s voice, and qualities from a second person’s voice, and create an amalgamation of the two.

Another day, they demo a product that combines a speaking RSS reader with an intelligent music engine: the program can tell whether the news it’s reading is happy or sad, and selects an appropriate piece of music to play behind it, giving the performance a broadcast feel.

They latch onto the word “personalization,” throwing around ideas about how one day, we might have our Tweets read to us in the voice of the person who wrote them, or be able to walk into our home and say “it’s me,” and have our thermostat adjust to the temperature it knows we want, using speech recognition and artificial intelligence. I tell them a random anecdote about a famous piano player who once built a chair that squirted roach spray, activated when he smoked a joint, to mask the smell.

“Yeah, you could use speech recognition to spray something into the air, so your wife wouldn’t know you were smoking weed,” says Ward.

All jokes aside, this general concept doesn’t seem too far away, considering the existence of smart home technologies like Nest, a thermostat that learns what temperatures you like, and self-adjusts when you come and go. Nor does the reading of Tweets in one’s own voice: Cepstral recently created a custom pro bono TTS voice for a blind teenager based on audio recordings he did in his bedroom, proving you don’t need professional-quality recordings to get a passably decent result.CereProc (SARAH-Prock), a 12-person Edinburgh-based TTS firm that created a voice for the late film critic Roger Ebert after he lost his larynx from oral cancer, plans to launch a personal voice cloning product soon. Then all that needs to happen is that your TTS reader be able to channel the other peoples’ voices.

IT WOULD BE NICE IF VOICE SYSTEMS LIKE SIRI UNDERSTOOD THE USERS’ EMOTIONAL STATE AND REACTED ACCORDINGLY

But even if vanity voices don’t take off (a lot of people really hate the sound of their own voice, after all,) there still remains the promise of creating better synthetic voices that allow us to have a more fulfilling relationship with technology.

“Siri is incredibly easy to understand, but where we still need to break through a barrier is having Siri convey the emotional and social characteristics that are so important in regular speech,” says Benjamin Munson, a professor of speech, language, and hearing science at the University of Minnesota. At a bare minimum, he says, it would be nice if voice systems like Siri understood the users’ emotional state and reacted accordingly, the way a human attendant may adopt a soothing voice to deal with an enraged customer, for instance. Synthesizing so-called “paralinguistics,” that is, the social cues we communicate through language, is difficult, says Munson, but notes that academic researchers are beginning to study it.

“When I got into this industry, most of the speech synthesis market was for [automated voice mail systems], and the idea of producing a voice that could really communicate a sense of emotion and identity wasn’t important,” says Matthew Aylett, Chief Scientific Officer at CereProc. “After all, you don’t want the bank to read your balance in a sad voice if you’ve not got much money.”

But now that synthetic voices are reading blog posts and even entire Kindle books, carrying on conversations about scheduling, and telling you how to get to grandma’s house, it’s time, says Aylett, to shift out of neutral.

“R2D2 from Star Wars was always my favorite robot,” says Aylett. “He still sounded like a robot, but had great character, emotion, and sarcasm. We try to produce voices with a sense of character.”

Still stuck on the talking roach spray chair, chatting cars, and the idea of having my Twitter feed read to me in a chorus of friends’ voices, I asked Wayment from Cepstral, how important increased artificial intelligence would be for future TTS applications. He told me “very,” but then said: “but not in the way you might think.”

Recently, said Wayment, he spoke with a visually impaired customer who said: Do you know how hard it is to use a microwave? When they’re all different and have different displays? Which led Wayment to imagine a world full of talking microwaves. He paused, then said seriously: “I think the day is coming where even little devices are speaking, but we run the risk of just filling our lives with noise. It’s not going to be enough to have devices talking, they’re going to have to tell us things we need and want to know. They’ll have to have insight.”

And if they don’t, I see a new business opportunity: the synthesis of silence.

Source

Revolutionary User Interfaces

The human computer interface helps to define computing at any one time. As computers have become more mainstream the interfaces have become more intimate. This is the journey of computer technology and how it has come to touch all of our lives.

Source: http://timeline.verite.co/examples/user-interface/

LightRails: A Neglected Railroad Underpass Illuminated

Built in 1931, this Art Deco railroad underpass in Birmingham, Alabama is a vital gateway between the heart of downtown and a new urban space called Railroad Park. In recent years the dark tunnel had deteriorated into an unwelcoming and potentially dangerous area, so the city hired sculptor and public artist Bill FitzGibbons to create a lighting solution that would encourage more pedestrian traffic. Titled LightRails the installation is composed of a network of computerized LEDs that that form various lighting patterns in the previously darkened underpass. (via contemporist)

Source