Tags: interaction

The Tink Tank » Understanding screen reader interaction modes

Léonie gives a great, clear description of how screen readers switch modes as they traverse the DOM snapshot.

Somebody

We are on our way to a bright Maneki Neko future.

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

Radio-Controlled Web Design · An A List Apart Article

Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.

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.

The Making of Aprilzero

The first in a series of posts looking at the process behind builfing this “quantified self” site:

As with most decisions in my life, I asked myself: What would Tony Stark do?

Practical ARIA Examples

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

Wearables versus there-ables.

Some interesting thoughts that follow on nicely from Scott Jenson’s ideas around just-in-time interactions:

What if the technology was actually already in the room when we got there? Maybe that’s the kind of Internet-of-things that will be more sustainable and will win long-term.

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?

300ms tap delay, gone away - HTML5Rocks Updates

I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.

Toward A People Focused Mobile Communication Experience - Tantek

Some good brainstorming from Tantek that follows on nicely from Anne’s recent manifesto.

What Screens Want by Frank Chimero

Frank’s fantastic closing talk from this year’s Build. There’s a lot of great stuff in here about interaction design, and even more great stuff about what’s been happening to the web:

We used to have a map of a frontier that could be anything. The web isn’t young anymore, though. It’s settled. It’s been prospected and picked through. Increasingly, it feels like we decided to pave the wilderness, turn it into a suburb, and build a mall. And I hate this map of the web, because it only describes a fraction of what it is and what’s possible. We’ve taken an opportunity for connection and distorted it to commodify attention. That’s one of the sleaziest things you can do.

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.

Enabling new types of web user experiences - W3C Blog

Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.

Human Interest by Trent Walton

Trent proposes a way to avoid implementing dark patterns: take a leaf from the progressive enhancement playbook and assume the worst conditions for your user’s context.

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.

Issue 18850005: Disable double tap zoom on mobile sites, to remove 300ms click delay - Code Review

Well, this is interesting: it looks like Chrome might stop waiting 300ms for potential double-tap-to-zoom events if the site is using a meta viewport declaration that sets the width to device-width.

Designers’ Friend

I kind of love the interaction design of this site.

A Digital Tomorrow on Vimeo

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

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!

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.

You can’t create a button by Nicholas Zakas

Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.

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.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

Text Adventure: Zork Creators Honored With Pioneer Award | Game|Life | Wired.com

This might well be the best thing Wired has ever published. I wish every article were in this format.

Lamps: a design research collaboration with Google Creative Labs, 2011 – Blog – BERG

Beautiful thoughtful work from the BERGians.

Connecting (Full Film) on Vimeo

A short film about interaction design.

The best interface is no interface | Cooper Journal

Interaction dissolving into the environment.

The Past 100 Years of the Future

This (free!) PDF looks like it could be a nice companion piece to Chris and Nathan’s recent book:

Human-computer interaction in science-fiction movies and television.

It’s a work in progress. You’ll notice a lot of placeholders where the images should be. That’s because the studios are demanding extortionate rates for screenshots.

What is the medium? – David Bushell – Web Design

I’m really enjoying these thoughts prompted by Paul’s article in A List Apart. I particularly the idea of taking a long-zoom approach to progressive enhancement: evolving the aesthetic of web design over time.

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.

The Slow Web – Jack Cheng

This resonates deeply with me. It is worth your heartbeats.

10 Timeframes | Contents Magazine

I didn’t count how many heartbeats it took to read this, but it was worth every single one.

Resizable Displays | Fluid Interfaces

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

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.

Koalas to the Max dot Com

Pretty!

How to Approach a Responsive Design | Upstatement

A great behind-the-scenes look at the process behind the responsive Boston Globe site, with a particular emphasis on the visual and interactive design challenges.

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.

Jeremy Keith: Paranormal Interactivity on Vimeo

This is the talk I gave at An Event Apart through 2010. It’s all about interaction design with some examples from Huffduffer.

Buxton Collection

Bill Buxton’s collection of input devices going back thirty years.

Fixed Positioning in Mobile Browsers | Brad Frost Web

Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.

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.

Mobile Apps Must Die | Blog | design mind

Scott writes up some of the things he talked about at the Breaking Development conference: the just-in-time interactions that are inevitable in a heavily-instrumented world.

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.

Journal of Emerging Investigators | JEI is a scientific journal for middle and high school scientists.

A great responsive design from Scott Jehl for a publication aimed at young science hackers. Notice how the interactions change according to available screen real-estate.

timoni.org - The most important page on Flickr

It’s funny, I’ve just recently become acutely aware of exactly the problem that Timoni describes here: the inability to filter new uploads by a particular user.

It makes stalking someone that much harder.

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.

aM laboratory

A beautiful piece of musical mathematical poetry.

Non Hover | Trent Walton

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

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.

A real person, a lot like you | Derek Sivers

A beautiful reminder.

FUI Fantasy User Interfaces | Mark Coleran Visual Designer

A portfolio of imaginary interfaces as seen in the movies.

101 Things I Learned in Interaction Design School

A set of short, easily-digested lessons from the world of interaction design, inspired by "101 Things I Learned In Architecture School."

Adding “1UP notification” with jQuery - O! Mr Speaker!

A jQuery plug-in inspired by the interaction feedback on Huffduffer, which was in turn inspired by retro games.

Cadence & Slang is a book about interaction design. — Kickstarter

If you want to see this book published (and you should), why not pledge a little something to the cause?

Dave Gorman: When Twitter Gets Weird...

Dave Gorman understands Twitter. Many do not.

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"

Rands In Repose: A Signature Cadence

Heartfelt and moving: praise for those who sprinkle doses of humanity into software interfaces.

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

adaptive path » aurora concept video

A proof of concept browser from Adaptive Path together with Mozilla Labs. This must have been fun to work on.

RA DIOHEA_D / HOU SE OF_C ARDS - Google Code

The new Radiohead video isn't really a video at all. It's data visualisation. Here you can interact with the data points while the song is playing. I love this.

Stop using Ajax! - Opera Developer Community

Ignore the attention-grabbing headline. Brothercake is something more nuanced here (and he's backing it up with examples).

The Highly Extensible CSS Interface

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

Exploring Methods of Accessing Virtual Worlds - AccessWorld® - March 2008

This is pretty freakin' awesome: an accessible interface onto Second Life.

Space Time/No Time - Brightcove

Matt Jones speaks about "Designing for SpaceTime, Building in No Time."

AJAX and Screen Readers - Content Access Issues - The Paciello Group Blog

Steve Faulkner gives a rundown of the current state of play between screen readers and Ajax.

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."

jQuery UI: Widgets, Components, and Interactions

From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.

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.