A "Fluid" interface allows you to change the size of your window, and the interface adapts accordingly to show you more or less content -- more or fewer thumbnails for example -- without decreasing the usefulness of the site.
Not only is this great for users who have larger monitors (or smaller ones such as iPhones), but as a designer, it makes it easy to adapt your site to other devices (like cell phones) without having to generate lots of different versions of your design.
Stretch and shrink these windows and notice the number of thumbnails changing:
http://www.thefind.com/search?query=frog
http://www.thefwa.com/
This one takes a little more effort, but it's a nice example in Flash of the interface adapting to window size.
http://www.cubic.com.br/#/en/peca/44/81
Showing posts with label "interaction design". Show all posts
Showing posts with label "interaction design". Show all posts
Wednesday, December 02, 2009
Tuesday, December 01, 2009
Interface Trend: Fixed Footers
http://www.thefind.com/search?query=womens+watch
http://moma.org
http://www.sitepoint.com/
http://www.totalbeauty.com/reviews (fixed touts at the bottom)
http://www.hi5.com/
and of course, http://facebook.com
http://moma.org
http://www.sitepoint.com/
http://www.totalbeauty.com/reviews (fixed touts at the bottom)
http://www.hi5.com/
and of course, http://facebook.com
Labels:
"interaction design",
interface,
trends,
web
Tuesday, November 17, 2009
Interface Trend: Modal Windows
Modal windows are perfect for login processes because they don't take the user out of context, and allow them to log in and go right back to what they were currently doing. Usually you click an "X" or "Close" button to get out of them, or click anywhere on the screen other than the window. Most of the time the screen behind the window darkens or fades out and its functionality becomes inactive.
Here are a few nice examples.
Nice Modal windows:
http://www.nick.com/ (click "log in" or "register")
http://getsatisfaction.com/ (click "log in")
http://listen.grooveshark.com/ (click "log in")
http://www.scrapblog.com (click "feedback" on the left)
http://www.scrapblog.com/builder/#
http://fancybox.net/example
http://www.shadowbox-js.com/index.html (scroll down for examples)
http://www.twine.com/ (fades out the background nicely)
Open/close effect examples:
http://www.likno.com/jquery-modal-windows/examples.php
http://www.ericmmartin.com/projects/simplemodal-demos/
For video too:
http://www.burconsult.com/tutorials/fancyplayer/index.html
Here are a few nice examples.
Nice Modal windows:
http://www.nick.com/ (click "log in" or "register")
http://getsatisfaction.com/ (click "log in")
http://listen.grooveshark.com/ (click "log in")
http://www.scrapblog.com (click "feedback" on the left)
http://www.scrapblog.com/builder/#
http://fancybox.net/example
http://www.shadowbox-js.com/index.html (scroll down for examples)
http://www.twine.com/ (fades out the background nicely)
Open/close effect examples:
http://www.likno.com/jquery-modal-windows/examples.php
http://www.ericmmartin.com/projects/simplemodal-demos/
For video too:
http://www.burconsult.com/tutorials/fancyplayer/index.html
Labels:
"interaction design",
interface,
trends,
web
Wednesday, November 11, 2009
RFID smart wooden blocks
Shameless re-post: Wilsonbuilt's blog
RFID + Wood =
Sure it looks like a bunch of cute Scandinavian wood blocks and maybe a Red Hot Fireball. But it's actually a media triggering system developed by Jørn Knutsen, Einar Sneve Martinussen and Timo Arnall from Architecture-og designhøgskolen in Oslo. Put an object in the little bowl and it triggers an attached computer to do different stuff – play a movie, or start a kid’s game. Check it out here on belowtheclouds.com.
RFID + Wood =
Sure it looks like a bunch of cute Scandinavian wood blocks and maybe a Red Hot Fireball. But it's actually a media triggering system developed by Jørn Knutsen, Einar Sneve Martinussen and Timo Arnall from Architecture-og designhøgskolen in Oslo. Put an object in the little bowl and it triggers an attached computer to do different stuff – play a movie, or start a kid’s game. Check it out here on belowtheclouds.com.
Tuesday, September 15, 2009
Useful InDesign Libraries/Templates from EightShapes
http://unify.eightshapes.com/wireframes/wireframes-preview/
Only catch, you have to have at least CS3, and I prefer C2...
Only catch, you have to have at least CS3, and I prefer C2...
Tuesday, September 08, 2009
Useful Image for Web Design Screen Sizing

Click to see a more "useful" view!
This image shows the different screen sizes you can design for and what percentage of people have them.
from methodologie
Tuesday, August 25, 2009
Human Centered Design Toolkit from IDEO

A free innovation guide for NGOs and Social Enterprises
For years, organizations have used Human-Centered Design (HCD) to arrive at innovative business solutions. In collaboration with the Gates Foundation and non-profit groups IDE, ICRW, and Heifer International, IDEO has specially adapted this process for NGOs and social enterprises that work with impoverished communities around the world. The resulting HCD Toolkit helps organizations understand people’s needs in new ways, find innovative solutions to meet these needs, and deliver solutions with financial sustainability in mind.
Download it here >
Monday, August 17, 2009
Usability Week 2009 Conference in Berlin Nov 15-20
A great opportunity to learn more about usability and user-centered design, or to get inspired for your current project.
It's too late for the Sydney one but there's still:
Edinburgh
Sep 14-18
Las Vegas
Oct 11-17
Berlin
Nov 15-20
I'm going to try to aim for the one in Berlin. I can't believe it's been 20 years since the fall of the wall, I remember that day so clearly!
http://www.nngroup.com/events/
It's too late for the Sydney one but there's still:
Edinburgh
Sep 14-18
Las Vegas
Oct 11-17
Berlin
Nov 15-20
I'm going to try to aim for the one in Berlin. I can't believe it's been 20 years since the fall of the wall, I remember that day so clearly!
http://www.nngroup.com/events/
Tuesday, February 24, 2009
Wednesday, November 05, 2008
Confusing Ballot Interface -- Bad Interaction Design?
Voting in California-- you have to complete the arrow. It's a terrible Interaction Design decision!
The first time I saw this, I had no idea what was going on, usually arrows imply movement or relationships between what's on one side and what's on the other -- not the case here at all, as you can see. Sorry about the horrible photo, I took it with my iPhone in the polling booth, which was in someone's garage and not very well lit!
Here's a good article on the subject from slate.com
Labels:
"interaction design",
california,
elections2008
Monday, October 06, 2008
Waterfall vs. Agile Development
As a user experience architect, I'm nervous about going into my next project using Scrum. I've done it before and unfortunately came out of it feeling like Agile development was an excuse for the programmers to get to skip the design and research phase of a project and jump straight into development. It makes my job harder as a user experience architect because I can't do wireframes and I have to work with user stories when the conceptual framework doesn't feel stable yet. Like deciding how many wheels your vehicle is going to have before you've even decided if it's a car, train, or bike. Or maybe you'll just walk.
As someone who designs interfaces for a living, I am not sure I like the idea of programmers getting started without having a wireframe to work off of. Still, I'm willing to try. At least I'm being involved early in writing the user stories for this particular project, so I feel like I have some control over the experience...perhaps i'll write some that are like, "as a user experience designer, I am consulted throughout the process so that the website doesn't launch until I think the design makes sense and works well" !! Just kidding.
Anyway, I found a presentation by Maria Giudice of Hot Studio that I really enjoyed. It shows a diagram of what I think is a happy compromise: using the waterfall method first and then agile closer to the development phase.
As someone who designs interfaces for a living, I am not sure I like the idea of programmers getting started without having a wireframe to work off of. Still, I'm willing to try. At least I'm being involved early in writing the user stories for this particular project, so I feel like I have some control over the experience...perhaps i'll write some that are like, "as a user experience designer, I am consulted throughout the process so that the website doesn't launch until I think the design makes sense and works well" !! Just kidding.
Anyway, I found a presentation by Maria Giudice of Hot Studio that I really enjoyed. It shows a diagram of what I think is a happy compromise: using the waterfall method first and then agile closer to the development phase.
Monday, February 04, 2008
An Artist Inspired by Interaction Design! Mafalda Santos

Love it! Her art is about the relationships between things, and contains lots of diagrams.
Organizational schemes, networks, interconnection and principles of scale and composition are determinant in Mafalda’s work. Expanded drawings on murals or ground works cull their information from computer interface, books and archives to create a simplified imagery that reflects “a moment/place in a mental or social structure of relations.” The artist also considers that they offer a comment on the specific context for which the work was produced.
She's from Portugal and has some work on view at Location 1 in NY. You can see more of here work on that site too, it looks like she doesn't have her site up yet.
Labels:
"interaction design",
art,
art show,
inspiration
Wednesday, December 12, 2007
Magnetic Web Widgets!!


Magnetic checkboxes, dropdowns, generic logos, etc-- great for prototyping...or just sticking on the fridge. OK, maybe not sticking on the fridge.
Too bad it comes with a book and all that, because the $200 price tag for the whole Usability Kit it comes with is a bit heavy if you just want the magnets.
I just think having website elements in magnet form so you can move them around and draw around them on a whiteboard is brilliant!
check them out (they are mace by sitepoint)
Friday, November 16, 2007
User Experience Consulting Firm: Hydrant

I think it's a great sign that User Experience consulting firms are popping up all over the place; it seems like businesses are finally realizing that the experience they create for their customers determines whether they buy their products or not.
Hydrant SF is a customer experience consulting firm I just came into contact with. They sound great, very professional, and have a great client list as well as years of experience.
check them out at hydrantsf.com >
I think they describe very well the problem we User Experience Designers are trying to solve:
"Customers are constantly interacting with your company. On the Web, through catalogs and call centers, via automated phone systems, with your physical products, through your services, or in your stores.
Each of these interactions is a piece of the customer experience that IS your company.
Who owns that overall customer experience in your organization? Is it any good? Where can it be improved? Most companies have no idea. "
Tuesday, March 20, 2007
Free InDesign Library - Wireframe Elements

Here are some useful wireframe elements I put together to share. Feel free to grab this file and add your own stuff to it. If you have any great items you want to share, please send them to me so I can add them!
This library works on Adobe InDesign CS2 for Mac and Windows.
I hope Interaction Designers who haven't tried InDesign will do so now....I prefer it to Visio any day.
Feel free to leave comments/suggestions.
download the file here >
you will also need the Vector Safari from oddlaa.com.
Here is a sample document that shows them all: download the indd >
thanks,
maya
Friday, March 02, 2007
$100 Laptop: Not Enough User Testing?

There's a good Business Week article with a slideshow that's worth checking out. It talks about the Graphical User Interface (called Sugar) on the famous laptops (XO and the "one laptop per child" program is an idea that arose out of the "failure of standard attempts to use computers in education to improve the lives of underprivileged children")
To quote the article, "Typically, a handful of computers, designed for business applications, are installed in schools; students only use them in special computer classes and are forced to share. Negroponte's idea was to give a laptop to each student that he or she could take to every class and bring home at the end of the day. "OLPC is child-centric, designed to be a seamless part of their lives at home, at school, and in play," he says."
What is shocking to me is that they apparently did not do any user testing. This goes for both the hardware and the software. The article quotes John Maeda as saying,"They're backed up by John Maeda, a user-interface design guru from the Media Lab who has been watching the XO development process from its beginnings. 'They're using the Steve Jobs method,' he says, referring to Apple's famous chief executive and design whiz. 'You don't use focus groups. You just do it right.'"
Will they have guessed what underprivileged kids want and how they behave on a computer correctly? We'll find out in the next few months...
Labels:
"interaction design",
interface,
products
Monday, February 12, 2007
Bad usability calendar: not usable at all (just kidding) but full of good advice!

Check out the Bad Usability Calendar site!
Before you start pointing out the bad usability mistakes in my blog (which I am well aware of, thankyouverymuch) take a look at this calendar-- it's really good, though its purpose is not to actually be a calendar, but to demonstrate one interaction design mistake for every month of the year. Plus they provide the "source" files so you can make your own.
Nice.
Also, funny.
Subscribe to:
Posts (Atom)









