Wednesday, March 31, 2010

YouTube and Usability

There are many UX issues with YouTube. I've mentioned them before.

Here is a quote from a Google Employee responding to the frustration of YouTube users.

Here are a few ways your input has influenced the page's current design...

The "Like" button (which initially not only rated videos, but also saved the video to your Favorites) was confusing. It didn't feel right to rate and add a video to favorites at the same time.

By redefining what “Liking” a video means and adding a “save to” button in the actions bar, rating a video ("Liking" it) and saving a video (Favoriting it or adding it to a playlist) are now totally separate actions. So when you want to rate something, use the “Like” button. When you want to Favorite something, use the “save to” button.

This is 2010 and Google still does not employ UX professionals? Who would, who could, possibly think to have one link do two such completely different tasks. Just because you may like a video in the context of general browsing doesn't mean that you want to add it to your playlist.

As an example I may *like* a video of a friends baby but that doesn't mean I want to save it to a site dedicated to Information Architecture.

Thursday, March 25, 2010

Scrolling versus clicking

Site design has gone away from page turning format of the codex and back to the concept of scrolling. Is this an advancement? Should information be presented screenful by screenful? The problem in reading large amounts of information, whether scrolling or page turning / clicking format is the ease by which the reader may remember or mark his progress through the text. The advantage of “pages” is that one doesn’t lose ones place on the page. Scrolling requires our eyes to readjust to a new configuration of text. This is counter to our usual mode of acquiring information. Back in 2001 I wrote, while writing on the same subject:
The only reason for not “turning” pages is because presently response time is too slow. Only when the response time become nearly instantaneously (less than 1 sec) does turning the page make sense.

Well now that it is clear to everyone that “page turning” is preferable to scrolling, and we can present pages nearly instantaneous the question becomes how do we convince customers to incorporate this in their site redesign?

There is a price for converting a website and for most companies there isn't a ROI. Retrofiting a "scrolling" site into a "page-turning" site calls for more experienced developers and new IA design. As such changes will have to wait until the next major site redesign.

What can be done right now? Scale back on the displayed text. Eliminate as much text as possible EXCEPT in the posted articles.

Friday, March 19, 2010

Facebook surpasses Google

This week Facebook surpasses Google SE as the most used site on the internet.
Facebook becomes bigger hit than Google
I wonder - when will Facebook collapse? Certainly it will continue to rise in popularity for a while - but there will come a time (sooner rather than later) when privacy issues will come to the fore. There will be an "event" that will give people pause to be on Facebook. At that point Facebook will reach a fork in the road and must choose which path it will take: will it respect its user's privacy or will Zuckerman/Facebook continue down the path it's on.

I think that Facebook will continue down the path it's on, make it's money "today" and die out as it's replaced by a more privacy-friendly alternative.

Wednesday, March 17, 2010

Meshing the Developer with the Information Architect

Many IA professionals come primarily from the creative side as I originally did. Now I come from the technical side as well. Both sides bring strengths, both sides have problems. I’m working on an intranet sub-site which is primarily being used by accountants and bookkeepers. A simple IA problem arose. It's a bit lenghty to explain. The intranet has a standard three column layout. Navigation on the left; middle column has major headings (bookkeeper & accountant items)and then drill down information on the right.

Everything is being kept above the fold in either iframes or scrolling divs as appropriate. The problem to be fixed was this: as the user scrolled down in the right column there was no indication of which heading had been selected. We needed to find a way to keep the label at the top of the right column.

The developer in me said: no problem just put a scrolling div inside the iframe and the problem is solved. The date and info would stay put as the data was scrolled down. It was more than a little disappointing when I found that an "unsolvable" problem came up. There were now two vertical scroll bars next to each other. The “obvious” solution was to remove the scrolling from the iframe. Unfortunately the coding that allowed the div to scroll (overflow: auto) overwrote the iframe code which normally removed the scrollbar (scrolling=no).

So what to do? Obviously we can’t let this stop us. There were two solutions. One solution was to build another iframe with the header information in it and have one link change both iframes. This would be a very clunky solution. The other solution would be to create a div that would hide the iframe’ scroll bar; leaving only the div scroll bar visible to the end user. Think of this div as an object in Visio or a layer in Photoshop that you brought to the front hiding what’s behind it.

I dislike these kludges; you shouldn’t have to hide coding problems with “fake” divs. That’s the developer in me speaking. What is the problem in knowing technical solutions? Simple, sometimes knowing the technical aspect of a problem is a distraction. The IA’s role is to solve IA problems; not to solve the developer’s problems.

Does this mean that developers are handicapped when it comes to doing IA work? Not at all I find that some IAs, from a more creative background, have issues with the Creative Director. They have the same problem in the creative end as I have in the development end. Namely do your job and leave others to do theirs – until they ask for a suggestion.

Saturday, March 6, 2010

Display problems when combining AdSense with Blogger.

I was on the AdSense boards and someone was having problems with the AdSense ads breaking her design. She wanted to have text, followed by the ads followed by text. This following long post is to help her with her site design. In a nutshell blogger's CMS can be problematic when adding photos or graphics; especially for HTML newbies who don't want to look at the code.

So to this budding blogger and others following in her footsteps here's the simplest way to accomplish what you're looking to do. Place:

<div style="clear: both;"> THE TEXT GOES HERE </div> around your text.

test text test text test text test text test text test text test text test text test text test text test text test text test text test text

test text test text test text test text test text test text test text test text test text test text test text test text test text test text

test text test text test text test text test text test text test text test text test text test text test text test text test text test text

Now let's try it with the AdSense Ads that the person was having trouble with instead of plain graphics. Here's what it looks like without the divs:

test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text

Here are some of the pages we have done in our notebooks over the last few months. We are plugging away at these parts of speech, learning a new one every few weeks. Our Latin curriculum is also introducing the parts of speech, so we are being introduced to them in that way also.

 Another Language Arts resource that we will be using very soon is called Primary Language Lessons by Emma Serl. I have a few friends who have used this and are loving it. It is a gentle way to do Language Arts with your child, and seems to go along nicely with curriculums like Five in a Row, which we also love. :) I have ordered this book and am excited to start using it with the girls!

We still have problems. Why? For two reasons. One because there is a line break between the <iframe> tags; and second because some tweaking needs to be done in the iframe tag. To get the two iframes to line up next to each other both must be align="center" or align="left" depending upon what you want. Don't depend too much on doing this when you upon load the image. You still need the ability to do basic tweaking on your site. Even for one as user friendly as Blogger.

Blogger's content managment software is not perfect. If you wnat to move the imported graphics around you will need to know how to tweak your site.