Tags: interface

181

sparkline

I Wanted To Type a Number | Filament Group, Inc., Boston, MA

Choosing the right input type for your form field.

Indicating offline | justmarkup

Some interesting interface ideas here for informing users when a service worker is doing its magic.

In the future users may expect a site to work offline after visiting again, but until this happens, I think it is a good idea to let the users know about this feature.

CSS only scroll indicator

This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.

(Hint: try commenting out some of the CSS and see what happens.)

You Know What? Fuck Dropdowns

An entertaining presentation from South By Southwest on the UI element of last resort.

It’s funny because it’s true.

Stop the overuse of overflow menus — Medium

The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.

Words of warning and advice from Daniel.

Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist.

Adapting to Input · An A List Apart Article

Jason breaks down the myths of inputs being tied to device form factors. Instead, given the inherent uncertainty around input, the only sensible approach is progressive enhancement.

Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine

I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.

It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.

Typography for User Interfaces | Viljami Salminen

The history and physiology of text on screen. You can also see the slides from the talk that prompted this article.

Designing Modular UI Systems Via Style Guide-Driven Development – Smashing Magazine

Striking that balance between the reusability of modular components and maintaining a big-picture vision of the overall design:

We should always strive to use patterns in an application. For example, consistent use of colors and font sizes can quickly indicate to the user elements in the UI that can be interacted with. However, avoid using a pattern just because it has been implemented before; rather, use it because it really solves the problem at hand.

City Objects

A catalogue of objects and observations from cities around the world.

Dev.Opera — Making progressive web apps even better: ambient badging and “pop into browser”

Andreas demoed these ideas yesterday. Proper ambient badging and a way of getting at URLs even if a progressive web app is running in fullscreen or standalone mode. Great stuff!

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

Not The Post I Wanted To Be Writing… – Infrequently Noted

Phew! Alex seems to have calmed down. He’s responding to my concerns about exposing URLs in progressive web apps, but thankfully without the absolutist rhetoric or insults. Progress!

Beyond Progressive Web Apps • cssence.com

Matthias Beitl takes a stab at trying to tackle the tricky UI problem of exposing the URLs of Progressive Web Apps. This stuff is hard.

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

When Websites Won’t Take No for an Answer - The New York Times

Our Harry’s in the New York Times! Well, an article on dark patterns is in the New York Times, and Harry is Mr. Dark Patterns.

Flexbox Patterns

Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Design Patterns on CodePen

Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing Magazine

A good side-by-side comparison of loading techniques, with some clear advice. But pay attention to this note:

While the debate over “Load more” versus infinite scrolling versus pagination has been debated for years, the product loading method shouldn’t be the first thing that most e-commerce vendors spend their development resources on.

What happens next with Conversational UIs — Cennydd Bowles

Cennydd speaks his brains on conversational interfaces—a refreshing counterpoint to Chris’s cheerleading.

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

Why Implementing Swipe Gestures Causes A Mobile Accessibility Issue

Jennison Asuncion outlines the problem with relying on a swipe gesture for interactions.

I would say that this could be expanded to just about any interaction: it’s always dangerous to rely on one specific gesture. It’s always better to either provide multiple ways of accomplishing a task, or to simply take a declarative approach, get out of the way, and let the user agent handle it.

Drag and Drop File Uploading | CSS-Tricks

This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.

The code uses jQuery but it could be easily adapted to vanilla JavaScript, and anyway, it’s not so much the code that matters, it’s the approach.

A Semiotic Approach to Designing Interfaces // Speaker Deck

This looks like a terrific presentation from Alla on iconography, semiotics, and communication.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

CSS element() function - Vincent De Oliveira

Fire up Firefox and try out these demos: the CSS element value is pretty impressive (although there are currently some serious performance issues).

To put it simply, this function renders any part of a website as a live image. A. Live. Image!

How to fix a bad user interface - Scott Hurff

A lesson on the importance of handling each state of an interface:

  • the blank state,
  • the loading state,
  • the partial state,
  • the error state,
  • and the ideal state

…instead of just focusing on that last one.

The Hamburger Menu Doesn’t Work - Deep Design

Building on Luke’s research, James outlines the problems with hiding navigation behind a hamburger icon. So, to be clear, the problem isn’t with the icon, so much as the way it is used as a cupboard to shovel all our messy navigation issues into.

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Nicole Fenton | Interface Writing: Code for Humans

The text of Nicole’s excellent talk on writing helpful, human microcopy.

Interface Experience Maps, From the Notebook of Aaron Gustafson

This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.

Hamburger icon: How these three lines mystify most people - BBC News

The controversial hamburger icon goes mainstream with this story on the BBC News site.

It still amazes me that, despite clear data, many designers cling to the belief that the icon by itself is understandable (or that users will “figure it out eventually”). Why the aversion to having a label for the icon?

Dev.Opera — UX accessibility with aria-label

A great run-down by Heydon of just one ARIA property: aria-label.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Futures of text by Jonathan Libov

This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.

(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)

Password Masking

A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.

Major caveat: make sure you still offer the ability to mask passwords too.

LukeW | Showing Passwords on Log-In Screens

Luke continues to tilt against the windmills of the security theatre inertia that still has us hiding passwords by default. As ever, he’s got the data to back up his findings.

Thoughts on Pagination

I’ve been thinking about this a lot lately; alternate ways of paginating through the past e.g. by day instead of by arbitrary amount.

The New Yandex.Browser. Alpha version

A concept browser from Yandex that takes an interesting approach to URLs: on the one hand, hiding them …but then putting them front and centre.

But the main focus of this concept browser is to blur the line between browser chrome and the website it’s displaying.

Alien | Typeset In The Future

Typeset In The Future is back with another cracking analysis. This time—following on from 2001 and Moon—we’ve got Alien.

In her final recorded message before hypersleep, Ripley notes that she is the sole survivor of the Nostromo. What she forgets to mention is that she has not once in the past two hours encountered any Eurostile Bold Extended.

Cursors

A self-describing list of cursors available through CSS.

Breach - A browser for the HTML5 era

A new browser on the block (though not a new rendering engine), this one is written is written entirely in JavaScript. It’s worth taking it for a spin to see some of the interesting interface ideas around tabs and loading indicators.

Personally, I’m all for more browsers. The more, the merrier.

Smart Fixed Navigation

Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.

I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.

Navigating the Guardian | Help | The Guardian

A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.

You can try it out here

Things we learnt designing ‘Register to vote’ | GDS design notes

A concise case study from gov.uk:

Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.

Practical ARIA Examples

Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.

A no-javascript toggle content feature

A clever way of doing progressive disclosure with CSS.

rel=search on Flickr

Here’s a nice little UI addition to Chrome. When you focus on the URL bar, if the current site has site-specific search discoverable via rel=”search”, then you get a greyed-out hint to press tab so you can start searching the site.

rel=search

ntlk’s blog: Chrome obfuscates the URLs, Google benefits

Nat’s take on Chrome’s proposal to bury URLs:

The URLs are the cornerstone of the interconnected, decentralised web. Removing the URLs from the browser is an attempt to expand and consolidate centralised power.

Labelmask | Brad Frost Web

I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

Origins of Common UI Symbols

A lovely little tour of eleven ubiquitous icons.

Scrolling is easier than clicking

This observation by Josh seems obvious in hindsight (all the best insights do), but there’s a powerful idea there:

So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new?

Wallop Slider

I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

The slippery slope | 90 Percent Of Everything

The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.

Responsive Navigation: Examples of Navigation in Responsive Design

A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.

Auto-Forwarding Carousels, Accordions Annoy Users

Carousels are shit. Auto-animating carousels are really shit. Now proven with science!

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Screenshots of Despair

The existential angst of unfeeling feedback.

A Digital Tomorrow on Vimeo

A design fiction video depicting technology that helps and hinders in equal measure.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Responsive Nav — Responsive Navigation Plugin

This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!

datalist experiment

This is wonderful stuff! I’m a big fan of the datalist element but I hadn’t realised how it could be combined with input types like range and date.

So nifty!

Don’t Be Afraid To Teach Interactions by Timoni West

Timoni tackles the tricky topic of teaching taps.

Discoverability can be hard, but that shouldn’t stop us trying out new interactions.

Learning to See on Information Architects

A sweet, beautiful love letter to design, from Oliver.

No to NoUI by Timo Arnall

A well-reasoned and excellently hyperlinked piece from Timo pushing back against the calls for “invisible” design.

To be fair, I’ve only ever heard the “no UI” argument in the context of “sometimes the best UI is no UI at all.”

Still, this is a great explanation of why “seamlessness” in design is by no means a desirable attribute.

Sensory Interfaces (SI) on O Danny Boy

Dan isn’t keen on the term “natural user interface.” Here’s why.

Not click. Not tap. Select. : Cennydd Bowles

Cennydd uses the word “select” as an input-neutral term for what we might be tempted to call clicks or taps. Personally, I like the term “choose”, although that word might have too much intent bundled with it.

Knobfeel - Feels good man!

Reviews based entirely on the feel of the knob.

Carousel interaction stats by Eric Runyon

I’ve never been a fan of carousels on websites, to put it mildy. It seems I am not alone. And if you doubt the data, ask yourself this: when was the last time you, as a user, interacted with a carousel on any website?

The changing face of computers on screen

A look at the depiction of computer hardware and peripherals in sci-fi movies over time.

» Responsive Design for Apps — Part 1 Cloud Four Blog

A great piece by Jason analysing the ever-blurring lines between device classes.

Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:

What’s a web app?

Connecting (Full Film) on Vimeo

A short film about interaction design.

LukeW | Mobile Design Details: Hide/Show Passwords

I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.

Solita: This is rude

Let’s be polite. Especially when starting relationships.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.

Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.

The best interface is no interface | Cooper Journal

Interaction dissolving into the environment.

Don’t confuse design testing with device testing — Stuff

Andy makes a good point here, point out the difference between device testing and design testing:

When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.

These are not device testing issues, they are design questions and there’s a huge difference between how an interface feels to use on a smartphone size display and whether the HTML, CSS and Javascript actually works on any particular make or model.

Make it So | Interface Design Lessons from Sci-Fi

Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.

The Computer for the 21st Century

A classic piece of design fiction written by Mark Weiser 21 years ago.

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.

How to Make Progress Bars Feel Faster to Users - UX Movement

A fascinating insight into the psychological implications of animated progress indicators.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

From Print to iPad: Designing a Reading Experience

Harry’s 15 minute case-study presentation at UX London was excellent. He says the lesson is that we shouldn’t be afraid to make mistakes, but there’s another lesson here too: testing with users will save your ass.

Paperfold CSS | Demo Studio | Mozilla Developer Network

In amongst all the shiny demos on this site, this one could actually be useful.

Screenshots of Despair

Existential ennui delivered through interface copy.

We need a standard show navigation icon for responsive web design | Stuff & Nonsense

Andy documents the kinds of symbols being used to represent revealable navigation on mobile.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

Thoughts on Responsive Navigation

Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.

Clear for iPhone (Coming Soon!) on Vimeo

Nik demos the neat interactions in Realmac’s latest piece of iOS software in this cute little video.

Web Intents - Design Push

This looks like it’s going to be a great event on February 25th right here in Brighton: a gathering of minds to brainstorm around web intents. Get there if you can.

Redesigning the Country Selector - Baymard Institute

This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).

A Brief Rant on the Future of Interaction Design

The next time you make a sandwich, pay attention to your hands. Seriously! Notice the myriad little tricks your fingers have for manipulating the ingredients and the utensils and all the other objects involved in this enterprise. Then compare your experience to sliding around Pictures Under Glass.

BlackBerry Future Visions 2 - Leaked Video - YouTube

Possibly the least imaginative concept video ever made, this piece commissioned by Blackberry shows a dystopian near-future ruled by security departments run by people with very, very tired arms.

Productivity Future Vision (2011) - YouTube

This vision thing commissioned by Microsoft shows a future-friendly networked world where content flows like water from screen to screen.

Arrivals

A cute glanceable interface onto Foursquare that turns it into your own private railway station.

Registration | Frontend 2011

A nice Huffduffer-style mad libs form gives this registration form a friendly quality.

spin.js

An ingenious loading indicator that uses JavaScript instead of an animated .gif.

Web Actions: Identifying A New Building Block For The Web - Tantek

Tantek’s braindump of research he and Erin have been doing on web actions—verbs for the web, specifically interactions across sites: sharing, liking, and so on. I agree with him that this terminology feels better than “web intents.”

Button Sluts and Web Actions

Erin documents the next step after web intents.

Pretenders: Why mobile Web apps should stop trying to act like native apps « cvil.ly

I agree with this. I like it. I plus one it. So to speak.

Push Pop Press: Al Gore’s Our Choice

This looks like a beautiful way to present information, although it seems a real shame that the information is locked to just one class of device.

Developing the OAuth user experience at Twitter

Ben documents the improvements in Twitter’s OAuth flow. Maybe this will help to stop people blindly giving permission to dodgy third-party sites to update their Twitter stream.

Access Main Computer File

Well, there goes my afternoon: here’s an endless supply of computer interfaces from films.

YouTube - A Day Made of Glass… Made possible by Corning.

There are two things I’d like to see after watching this video:

  1. A slew of parodies to highlight the unintended consequences of this marketeer’s panopticon,
  2. The Paleofuture blog post in 100 years looking back at this.

3quarksdaily

An argument against skeuomorphic design. The Windows Mobile 7 design vocabulary is rightly praised for its no-nonsense beauty.

Augmented (hyper)Reality: Domestic Robocop on Vimeo

One potential nightmare vision of the future …that looks kind of cool.

Bug 578967 – Remove feed/RSS button from top-level GUI for Firefox 4 (move to bookmarks menu)

A heated discussion around the decision in Firefox 4 to remove the RSS icon from the address bar.

Seth's Blog: The inevitable decline due to clutter

I firmly believe that this is very relevant to visual design on the web.

Ben the Bodyguard. Coming soon to iPhone® and iPod touch®

An interesting way of using scrolling to tell a story.

Draggables

Watch this space. Glenn has a really interesting idea (and implementation) for exchanging structured data between browser windows using drag'n'drop.

Kitchen Interfaces Suck; Let's Break Down Why | Co.Design

Aza Raskin on the UI failings of kitchens.

UI Stencils - Welcome

I like this idea: stencils for common interface elements to be used with good ol' pen and paper.

End hover abuse now : Cennydd Bowles on user experience

An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.

My First Week with the iPhoneBehind the Curtain | Behind the Curtain

An emotionally affecting endorsement of the accessibility features on the iPhone.

Sweet Talking Your Computer - WSJ.com

Personality in software. Pieces of technology are people too.

Non Hover | Trent Walton

A timely reminder: don't hide information behind mouseover events.

Fight the system. « Boagworld

A rip-o...— I mean, another form inspired by Huffduffer.

What Apple needs to do now « Adam Greenfield’s Speedbird

Adam Greenfield is spot-on here, dismantling Apple's "imitate real world objects" design guideline for iPhone and iPad apps.

Cooper Journal: A bit of structure for craigslist posting?

An interesting proposal for a Huffduffer-style mad-libs ad-posting form for Craigslist.

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

VaultPress — Apply for Beta

Another Huffduffer-style sign-up form, this time from the good folks at Automattic. Very cute.

Color Picker — Raphaël

A very nice colour picker from the brilliant Dmitry Baranovskiy.

ignore the code: Realism in UI Design

Finding the sweet spot between realism and abstraction in interface elements.

Designing Devices | Controls are Choices

Balancing complexity and control.

FUI Fantasy User Interfaces | Mark Coleran Visual Designer

A portfolio of imaginary interfaces as seen in the movies.

What deux yeux have teux deux teuxday?

A very nice take on the to-do list app.

Aza’s Thoughts » Identity in the Browser (Firefox)

Aza Raskin share's some mockups of ideas for incorporating identity management into the browser.

HTML5 Elements and Attributes

A very handy interface for browsing the contents of the HTML5 spec.

Venn Diagrams as UI Tools « optional.is/required

A very in-depth article on visually representing Boolean logic in an interface. Stick with it; it's worth it.

My first experience using an accessible touch screen device « Marco’s accessibility blog

A hands-on account of the new accessibility features in the iPhone. Sounds like a great experience.

Contact Us « Kellan Studios

Nice Huffduffer-style contact form.

arc90 lab : experiments : HashMask - Another (More Secure!) Experiment in Password Masking

Here's an interesting idea: generating a sparkline when you input a password ...familiarity with the generated sparkline acts as a visual aid to the user.

Moof

The sign up process is using the Huffduffer model. Good to see more human forms in the wild.

Persuading Microsoft to Implement Canvas « Processing.js Blog

The 26 step process required to add +1 to a feature request in IE. Franz Kafka is alive and well and living in Redmond.

Visible Tweets – Twitter Visualisations. Now with added prettiness!

A visualisation of Twitter messages designed for display in public spaces. From the mad genius that is Cameron Adams.

BBC NEWS | Programmes | Click | Stevie Wonder interview

Stevie Wonder talks about assistive technology. I think this finally proves that yes, accessibility *is* sexy!

Cooper Journal: One free interaction

Small interactions that serve no useful purpose but are nonetheless satisfying. "Design this interaction such that: It's “free,” i.e. having no significance to the task or content, It's discoverable in ordinary use of the product, It's quick and repeatable (Less than half a second.), It's pleasant"

Pretty Loaded - preloader museum curated by Big Spaceship

A collection of Flash preloaders. Out of context, they make for surprisingly compelling viewing all together.

The OpenID and OAuth Flow: Playing with UX · Ben Ward

A thoughtful post from Ben on how the flow of OAuth, OpenID and Facebook Connect can be improved.

five second test - A simple online usability test

The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces.

The Whale Hunt / A storytelling experiment / by Jonathan Harris

An experiment in human storytelling, using a photographic heartbeat of 3,214 images to document an Eskimo whale hunt in Barrow, Alaska.

jQuery.timepickr.js

John Resig offers an alternative user interface for selecting a time.

soxiam portfolio - a set on Flickr

A comprehensive set of sketches, diagrams and screenshots from Soxiam showing the evolution and iteration of interfaces on Vimeo and other sites.

sketch: vimeo clip page ideas

web.without.words

Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.

Pattern Tap : Interface Collection for Design Inspiration

Collections of visual design patterns from web interfaces.

What reading Tufte won’t teach you: Interface design guidelines - glyphobet • ???????? • ????????

A good list of interface guidelines based on real world experience with a mobile phone, an music player and an operating system.

GUIMagnets - Prototyping made sticky

Interface elements as fridge magnets. Make prototyping fun!

The Paper Version of the Web at Deeplinking

A nice collection of sketches and paper prototypes.

bunnyhero dev » Scaring people with fullScreen

Fullscreen mode for Flash movies could be used to totally freak people out. Here's how.

Sternlab.

Knitted body-technology interfaces.

Wufoo: UI That Really Cares

A nice piece of UI design. I think Kathy Sierra would like this.

The Highly Extensible CSS Interface

Cameron has put all the materials from his four-part series together in one handy spot.

Traces of Inspiration » Blog Archive » URL as UI

The importance of good URL design.

KnickerPicker - online dressing room

A Flash interface that allows you to interact with lingerie models when shopping for knickers. I point this out purely for reasons of interaction research, of course.

Cognitive accessibility of user interfaces summarised in an oversimplified rule // plasmasturm.org

The Sapir WIMP hypothesis: "The more easily you can talk about a user interface, the more easily you can understand how to manipulate it."

No Ideas But In Things

"No Ideas But In Things is a library of controls, animations, layouts, and displays that might be a source of inspiration for interaction designers. Dan Saffer is the curator. The title comes from a William Carlos Williams poem."

Coverflow for People | FactoryCity

Chris mocks up an interface idea for Apple.

Main Page - AskWiki

A natural language interface onto Wikipedia. More of this kind of thing, please.

Google

What would happen if Google tried to apply SEO techniques to itself?

Humanized Messages for jQuery at Binary Bonsai

A nice little extension to jQuery from Michael Heilemann for displaying unobtrusive feedback messages.

RSS Reader for Mac - NetNewsWire

NetNewsWire now supports microformats.

Amazon: A Quick Tour of Our New Remodel

Amazon is AB testing their next design iteration. Bye, bye tabs (yay!), hello fly-out menus (boo!).

What's New at The W3C Markup Validation Service

The Validator got a new lick of CSS paint and it's looking good.

What I've been working on: The New Google Analytics, by Jeffrey Veen

Finally revealed: what Jeff has been working on since he moved into the lair of the Google. He's been making Google Analytics look and feel nicer.

mezzoblue § Chalkwork Basic Royalty-free Icons

Dave has made some icons — very nice ones.

Some Hands-On Time With the iPhone - Bits - Technology - New York Times Blog

David Pogue gets down and dirty with the iPhone. The good: "It feels amazing in your hand." The bad: "Typing is difficult."

Velvet Unravelled » Blog Archive » Portable social networks

Sarah mocks up an interface for importing contacts across social networks.

An Interesting Way of Showing Battery Status

The screen of this mobile phone looks like a glass of water. The amount of water shows the battery life. The phone has a built in motion sensor to keep the water level.