Sliding Panel: WordPress Plugin

What is a sliding panel?

Quite simply, it is a panel that can be opened and closed with a click of a mouse that will allow you to house additional content on your site without it getting in the way.

via Sliding Panel: WordPress Plugin.

What else would i think about at 3:40am

If I were tasked with designing a digital experience for a place like the museum of natural history:

My first thought: dinosaur bones. That’s what I remember most about my experience there as a youngster. I’m sure a lot has changed, but I wonder what others impressions are. What does it mean to different folks? What would my takeaway be if I visited today? Does it matter that I am an old guy and not a little kid having the experience?

Examine the current state like a forensics expert. Every existing experience can reveal cues about the current culture, the current perception from within. What is emphasized? What is buried? A glaring omission may represent a lack of ability or focus or worse, a political battle that has been raging beneath. The current state can reveal so much about the battles and challenges that may lie In the road to a new experience.

This is a physical location that relies on a physical experience. Any digital experience needs to consider the experience one can only truly have in person. As I mentioned before, I wonder what my takeaway would be today. I would first have the entire team go to the museum with their friends, family, or alone. Not experiencing it as a team with a job to do seems important. Then I’d gather the team to talk about our experiences. What pictures did we take? What brochure did we grab? What water fountain did we stop at (or any other seemingly innocuous event that may inspire later). Trying not to emphasize observations about other visitors seems key. I want to compile a picture of _our_ experiences.

Next – I would focus on the actual visitors with another trip. This one more about the task at hand. With camera and video camera in tow, I would send two different teams to compile their perspective on how random visitors are experiencing the museum. Having two perspectives may help to see some Interesting patterns in what elements were chosen to cover.

Then I would do all the regular agency forensics to establish the rails upon which the conversations ahead will ride. A great idea may fall through the cracks if we did not do our homework enough to understand how to couch the description and presentation. The reason that virtual tour does not exist (or whatever) may be an indication that someone tried and failed, something that was found to be a bad experience, something someone high-up does not feel is right, or something that was never even explored. Knowing something like that would go a long way in crafting the presentation for any big ideas that emerge.

Oh yeah – with all of the above information in hand – or while is is getting Into hand – I would sketch. By sketch I don’t mean make wireframes or prototypes. I mean I would burp out ideas for any aspect of the experience and find a common place to capture then and let them incubate. An observation like “we had the best hot dog at the cart outside.” could lead Inspire someone on the team down the road. We just never know. That’s the beauty of it.

All the above activities may help the team focus on _inspiration_ above innovation. Too often innovation is thought of as the focus for a creative endeavor. The reality I’ve found is that innovation is the wrong place to start. A team needs a bevy of inspiration in order to truly create amazing experiences.

So… What?… This has made me look forward to hearing about my nephew’s first trip to the museum this weekend. I wonder if he will remember the dinosaurs.

‘No Data’ – Elegant first-time experiences

I am trying out Alice.com and came across the “Budgeting” section. I enjoy the way they give me a flavor of what to expect from the section even though I am too new to have any data available. It is nice that they don’t assume that I buy 5,000 bars of soap each year because I have placed one order in the last 2 days.

 

What I like about this solution:

1. I get to see the benefits of the feature
2. We get to know each other:
   1. It doesn’t start making assumptions with very limited data. The danger of such assumption: It makes it clear that you don’t know me. Personal financial management sites make this assumption a lot. They start making recommendations even though they only know one month of my spending habits. I’d rather a process where we get to know each other a bit.

 

The Bronx Zoo assumes I can map with my mind

The first thing I noticed when we visited the Bronx Zoo website was the lack of a map. I would be curious to know whether they have ever had a map feature and why they chose not to include one in their most recent site.

As a more visual learner I prefer to explore the exhibits in a way that allows me to walk the park in my mind. The relationship between the exhibits in space is a huge factor in what I would plan on seeing and in what order. But, alas, there was no map to be found (except for the one I found in a google search).

After trying to find anything to give me a sense of the lay of the land there at the zoo, I found this visual that could help me determine whether some attractions would be too far or difficult to access for my pregnant wife:

I am a user trying to get information, as opposed to a designer trying to convey it. I enjoy being in this situation because I get to question the design choices of others within the context of my real-life task – a practice that drives my wife bonkers sometimes.

1. There are icons with labels. I enjoy that fact. Icons are their own can make for crappy icons.
2. Upon further usage I realized the icons provide little value as they are presented. When I scan across a row for an exhibit I am shown dots within each column. Now that the icons have been set up with nice labels they have been abandoned within the table itself. I found myself having to look up and down to make sense of the dots within each row.

The choice to only use the icons as headers actually added noise to the table.

I would:

1. Repeat the icons within the rows instead of introducing the dots. It might clutter up the table, but my gut says that would allow me to focus on each exhibit and understand the various attributes.
2. Provide some more context about what the columns actually mean. The phrase “Rough Terrain” confused me a bit. What was rough about it? I am assuming it means it would be tough to push a stroller around?

Screen clipping taken: 5/31/2009, 1:14 PM

WebToolbar – 10 Useful Web Application Interface Techniques | How-To | Smashing Magazine

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

StumbleUpon WebToolbar – 10 Useful Web Application Interface Techniques | How-To | Smashing Magazine.

Yay multi-select and compound widgets!! Realtor.com enhanced a thing

Realtor.com gets what we (my wife and I) are looking for in a home search site. The “Saved Homes” and clear emphasis on the pictures are stellar additions. The redesign was nice. My wife and I have been trolling realtor.com for the past…6ish months. Mostly my wife driving and me watching over her shoulder asking “now why did you click on that?”… then her grumbling a bit.

This time she was delighted by a minor, but helpful, enhancement. Obviously the big redesign was not the end of their new features, which is nice to see. The multi-select for the surrounding towns is a big upgrade from simply choosing a radius and rolling the dice. For certain price ranges just choosing a circle can really create some noise.

What I noticed:

1. You still have the radius feature. Good if you want it.
2. I can ignore the radio buttons and just start clicking away at the towns.
3. The sort is a nice feature. The distance gave us a sense of how far we wanted to scroll before just starting a new search.
4. The trick with multi-select: where do you display the results? I think Realtor.com made a smart choice. The results are accessible on mouseOver. That was all we needed. The real results are in the main area of the screen anyway.
   
5. They could put some indication of how many results are in each town for your query to let you know whether or not it’s even worth clicking, but I only came up with that after thinking about it for a while (which can be a dangerous thing for an interaction designer to do).

So… I dig it. I also dig compound widgets… oh and I also like the tiny arrow-like design element on top of the widget. No doubt what I am going to affect.

Select a Date: How is this not completely standardized by now?

Did a search for a room for an upcoming weekend trip. Came across myriad ways that sites still use to ask you the dates of your stay. My favorite are where I can pick one date and it assumes I am going to stay for a couple of nights. That seems simple, so why would sites Leave today’s date in the check-out field when I want to check in next Saturday. Why bother to prepopulate the field? The last image I grabbed was the worst of the lot in my travels. I needed to make _6_ selections on tiny form field elements in order to select my dates. Then I found there was no availability for those date. I could have checked Hotels.com 3 times for the same clickage.

 

Just struck me as I was making the booking and comparing rates – I am surprised that something so extremely common is not more standardized than it is. I wonder if it is the case of a lot of wheel reinventing. I’m sure at least one site has tested the heck out of different variations and nailed it. There does not need to be _one_ way to do it, because I am sure there are variations in audience and need, but perhaps we could at least stick with the most efficient ways by now.

 

Below are some grabs from my travels.

 

 

 
 

Big Numbers Evidence: Old School 37 Signals

Figured i would post evidence i come across that supports the ideas that the web needs more big numbers (and they of course need to be relevant numbers). Found this while getting distracted from a search for Ruby on Rails info (completely unrelated):

What I found…

An old school side project by the folks at 37Signals that concluded a big number should be the most salient element on a PayPal confirmation screen. (“How we made it better: We made the dollar amount the most obvious element on the page”). I think that made the page a lot better, especially considering it will send that much of my money to someone on my next click.

Not sure if it was ever implemented, but it certainly makes sense.

Nifty Spin on a Portal Display at MSNBC.com

This launched over a year ago, but like a re-run that you’ve never seen “it’s new to me”. I first have to say that i am now a fan of the MSNBC home page and I respect the work that went into it. I visited it for the first time after following an RSS link and these are my impressions of a particular feature:

What caught my eye?

Big letters. I enjoy using typography that draws my eye to headers and key bits of info. When used to their potential (e.g., the big words and numbers actually mean something, and aren’t a giant marketing term) they can offer a better visual anchor than an image. The headline here caught my eye as I scrolled down the page and anchored the portlet very effectively. I enjoy the control I appear to have with the options at the top (how many stories, placement/priority of the portlet). Those simple controls were enough to make me futz with the portlet and already begin to engage with the page in a personalized way.

What I like:

1. The grid is askew. The fact that each section is given its own space within a a more complex grid (more than 4 equal columns) allows the sections to appear in a readable way suitable for the content.
2. The fonts are readable and the typography assists in the design. The large font anchors the section, the font for each story is well spaced for reading, the blue is clearly clickable and the grey gets out of the way.
3. The story of this section is laid out for me. I can get a pretty good sense of what I am going to find within the “Business” section of the site. This is especially helped by the “Topics” area of the portlet (you’re not a true media site if you don’t have a “topics” section yet).
4. There is a good futz-factor. The links are clear and the display is simple enough that I feel like I know what will happen when I click them (i.e., enough to not be afraid to futz with the “Move Box”).

What seems to be missing:

1. Disappointment when clicking a story link. The stories themselves don’t seem to have caught up with the industry standard in terms of cross linking, summary info and integration of multimedia integration. CNN’s mosaic style is the best take on that so far.
2. # of stories control on top is a bit confusing. The definition of ’stories’ is a bit random. I imagined it was referring to the list of stories on the left, but it appears to also refer to the “Multimedia & Features” section as well. This sort of blurs the meaning of the ‘featured’ story on the left with the other ‘featured’ stories on the right. Also – what is a portlet with “0″ stories? An interesting choice for basically closing the portlet.
3. The left is more effective than the right. The ill-defined usage of the feature area is bothersome. I have created and struggled with such sections myself. It looks great on the PSD file (the image balancing out the text and such…) and I so want to find a use for it. It works when it is featured videos and such but after a year or so, i imagine it is hard to enforce such a rule.

New to me… nice job.