Tags: interface

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.

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

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.

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.