USTUFF a place for Ui & Ux Stuff

The UX of TV

Thu, 20 Sep 2012 10:54:33 -0400

janks:

The UX of TV from Kyle Outlaw

This just blew my fragile little brain

Thu, 06 Sep 2012 04:24:29 -0400

This just blew my fragile little brain

Check out an amazing video about the making off the rio olympic logo

Fri, 24 Aug 2012 05:19:00 -0400

Its amazing how talent and collaboration worked so well to create a beautiful logo.

See the video here http://www.wimp.com/riologo/

KLM Meet & Seat a great social experiment, its like blind dating at 50000 feet

Mon, 20 Aug 2012 05:18:00 -0400

Want to find out who will be on your KLM flight? With Meet & Seat you can view other passengers’ Facebook or LinkedIn profile details and see where they’ll be sitting – long before your flight leaves the ground.

I would love too see the stats around this :)

http://www.klm.com/travel/GB_en/prepare_for_travel/on_board/Your_seat_on_board/meet_and_seat.htm

50 Shades of Grey for CSS nerds :)

Fri, 13 Jul 2012 07:01:45 -0400

50 Shades of Grey for CSS nerds :)

janks: Creative UI Design Examples for Great UX I think it’s...

Thu, 12 Jul 2012 06:04:40 -0400

janks:

Creative UI Design Examples for Great UX

I think it’s great UI but i don’t agree that it’s all great UX

If Pinterest had been invented in the ’90s…

Fri, 18 May 2012 05:07:48 -0400

If Pinterest had been invented in the ’90s…

Future Forward: MIT Creates Amazing UI From Levitating Orbs

Thu, 17 May 2012 13:22:00 -0400

Future Forward: MIT Creates Amazing UI From Levitating Orbs

dennismfactory: Interface Origami: If you want to design really...

Mon, 23 Apr 2012 04:03:54 -0400

dennismfactory:

Interface Origami: If you want to design really nice, really tactile touch interfaces, then why not try mocking it up with origami? Nifty.

Google maps goes 8 bit

Mon, 02 Apr 2012 04:59:00 -0400

Google takes april fools day to the extreme I love it.

Readability gives great control over webpages by why dont we do it by default

Mon, 02 Apr 2012 03:57:26 -0400

Readability is a great little app for customizing views on a website, but I wonder why we are not all ready building these kind off features into our sites.

http://itunes.apple.com/us/app/readability/id460156587?mt=8

Cool not found screen by @designBombs

Thu, 29 Mar 2012 09:33:42 -0400

When you cant find what your looking for design bombs shows you something you may be interested in.

http://www.designbombs.com/?s=not-found

contextualinquiry: The Mobile Web Best Practice website is a...

Thu, 08 Mar 2012 17:15:07 -0500

contextualinquiry:

The Mobile Web Best Practice website is a really clever responsively built website with really great information about best practices when building and designing both UX and visual design for the mobile web.

They cover things like Haptics, Layout, Type, Feedback, Structure and other important principles.

Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes

Sat, 25 Feb 2012 16:50:00 -0500

Below is a great article from smashing magazine on finger friendly design.

Originally posted at http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices.

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

(Image credit: ogimogi)

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

Gyro13 Steam Copter Arcade has larger touchscreen targets

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

JavaScript required to get anchors to work properly in Safari and Chrome

Thu, 02 Feb 2012 07:04:03 -0500

Web designer and developer Damon Muma has “stumbled on to the factoid” that skip links are broken in WebKit browsers. On his blog, he outlines the problem, which stems from an issue that has its very own four-year-old bug report.

Speaking to .net, Muma explained that in WebKit, when you navigate to an internal link on the same page (such as page.html#internal-location), the focus stays on the link you originally followed (not necessarily ‘clicked’). If you then press Tab to move to the next link, it goes back to your original position on the page and your position at #internal-location is completely overridden. “The focus should move to the location of the anchor target, like in Firefox and Internet Explorer,” he explained. “The way it is now in WebKit, internal links are practically unusable without scripting to fill in the proper behaviour.”

Although the article was written from the context of skip-to-content links, Muma was keen to point out the problem is much wider: “It really affects anyone browsing a site using the keyboard. And this is important, because it’s not just about people who hate moving their hands away from the keyboard while browsing. Many people use keyboards, or input devices that mimic keyboards, because it isn’t physically possible for them to use a mouse. For these users, any unnecessary keystroke could be not just inconvenient but potentially painful.”

Author of Adaptive Web Design Aaron Gustafson was also surprised by the bug, and told us that “while skip-to links are a common example of the problem, they’re far from the only use – FAQs are probably the most common application”. Gustafson said that the behaviour noted by Muma was bad for accessibility and has been “largely ignored by the WebKit team”. This, he suggested, should be a big concern to those on the WebKit team: “It powers so many desktop browsers now – Chrome and Safari being the primaries, but Flock for Mac, Maxathon, Shiira, OmniWeb and iCab are other notables – and this bug therefore poses a major problem for the accessibility and usability of our websites. There are JavaScript workarounds, but they shouldn’t be necessary – this is HTML 1.0 stuff!”

As for getting something done about the issue, Muma says you can visit and ‘star’ Chromium Issue 37721: ‘Skip links do not work when using screenreader’.

URBANFLOW WOULD BASICALLY ADD PERSONALIZED INTERACTIVITY TO...

Tue, 31 Jan 2012 13:53:02 -0500

URBANFLOW WOULD BASICALLY ADD PERSONALIZED INTERACTIVITY TO PUBLIC SIGNAGE

poptech: Apple in Education Launches Three New Digital...

Wed, 25 Jan 2012 05:06:00 -0500

poptech:

Apple in Education Launches Three New Digital Educational Tools (via laughingsquid)

Browser made just out off css no images #cssBrowser

Mon, 16 Jan 2012 07:45:53 -0500

So on my first morning off in a while I tried a little experiment to create a representation off firefox using just css. No images, no base64, no SVG, no canvas, just CSS code and some javascript for functionality.

http://dominic-green.com/examples/browser/cssBrowser.html

Iphone image completely in css, no images = SICK!

Tue, 10 Jan 2012 11:39:28 -0500

http://tjrus.com/iphone

60gritbeard: (via Core77 Year in Review 2011: The Best of...

Wed, 04 Jan 2012 14:08:58 -0500

60gritbeard:

(via Core77 Year in Review 2011: The Best of Core77 - Core77)