Archive

Posts Tagged ‘design’

Better not to forget it: Nielsen on users

Here’s an insightful excerpt from Jakob Nielsen’s Alertbox, September 21, 2009:

Users don’t care about design for its own sake; they just want to get things done and get out. Normal people don’t love sitting at their computers. They’d rather watch football, walk the dog — just about anything else. Using a computer probably rates above taking out the trash, though.

Categories: design Tags: , ,

A new use for margins

While I still read books on my way to work, I recently started reading online articles and blog posts using my phone as well.

This morning, while I was reading a column on Alertbox on iPhone, I noticed with pleasure a small detail: the left and right margins of the page have more than a merely aesthetic purpose.

As anyone who ever used an iPhone will certainly know, you usually slide your thumb along one side of the screen to scroll the page you’re reading.

Now, look at the screenshot below (red margins were highlighted later): because of the empty space at the sides of the page users are able to scroll without hiding text under their fingers. That’s relevant if you have the habit of scrolling and reading at the same time. ;)

Alertbox, on the iPhone

I don’t know if Alertbox is styled like that by chance or by design, but I appreciate the result nonetheless.

As a side note: Alertbox is one of the most mobile-friendly websites I read. As such, it’s perfectly readable even on the small screen of my Nokia E71. ;)

Categories: web Tags: , , ,

Pagination directions

December 21st 2008 Alessandro Bahgat 3 comments

Although pagination is a widely diffused pattern, some times it can still be a bit confusing, when it comes to blogs.

Most blogs (and many news sites) have a couple of links at the bottom of the page, newer and older posts or articles. Of course, there are two opposite ways to arrange those links: put the newer link on the left and the older one on the right, or just the opposite. What I consider to be annoying (and confusing), is to find both alternatives used inconsistently across blogs and websites.

For example, the Google Blog puts the Newer Posts link on the left,

Google blog pagination links

while the Worpress Blog places Newer Entries » on the right

WordPress blog paginationConfusing, isn’t it? What is the right way to show those links?

Pagination by itself is quite clear: most web users have long become accustomed to Google search results pagination,

Google search results paginationand Yahoo’s Design Patter Library states it clearly:

  • Present links in the following order: ‘Prev’, page links, ‘Next’.
  • Display a left arrow after the label ‘Prev’.
  • Display a right arrow before the label ‘Next’.

In other words, previous goes to the left, while next goes to the right.

The problem with blogs and articles is that it’s not clear what should we consider the “previous page”.

Is it the one with the older (previous) posts? Or, since articles are listed starting from the more recent ones, the page with the more recent posts?

I think any answer would be debatable, and that’s the source of all the confusion. What would you say?

Categories: web Tags: , ,

Augmenting cityscape

I had the inspiration for the subject of this post this summer, while having a walk in Milan with a friend. As we passed in front of the XIV century Sforza Castle (italian: Castello Sforzesco), we noticed it was lit by coloured lights, which gave it a quite peculiar aspect.

Castello Sforzesco by night. Photo by --Nick-- on Flickr.

Castello Sforzesco by night. Photo by --Nick-- on Flickr.

The most notable aspect, however, is that the colour of the light can change over time (this is what is called dynamic lighting): the following time I was in the square in front of the Castle, it was lit by purple light.

The usage of lighting for aesthetic reasons is widely diffused as it’s an important aspect of architectural design. The illumination of the Sforza Castle, for example, was designed by light+, a design studio specialized in lighting for architecture.

While I like the idea of dynamic lighting, though, I’d love to see a different usage of illumination.

For years, light has been used in signaling, to carry some message across distance (on board of ships, for example). Nowadays, a lot of electronic devices include LEDs to communicate meaningful information to their owners.

Architectural lighting can be used to communicate as well: for example, the colour used to illuminate of a given landmark could change depending on the weather forecast for the following day.

While this is a trivial example, light can be used to enrich city landmarks to broadcast some message to anyone seeing them. While maintaining its decorative purpouse, light can transcend mere aesthetics, and used to bear a meaning by itself.

Just as in the past centuries, when people used to look at clock towers to get information that was relevant to them, we can make people see buildings and monuments under a new light. Literally. :P

If you know of any example of this approach, please let me know.

Categories: design Tags: , , , ,

Why Mac menus are on the top

November 27th 2008 Alessandro Bahgat 4 comments

Disclaimer: despite the title, this is not a post about junk food. :)

I always wondered why Apple decided to place their menu bar on top on the screen, rather than inside the window it belongs to. I couldn’t find any good reason for that choice until last week, when I spoke with a couple of colleagues.

Mac OS X menu bar

It turned that not only there is a reason, but it’s also quite clever! And it’s the same that led Microsoft to put the Start menu on the bottom left corner: stuff on the edges of the screen is just easier to hit.

Almost no aim is needed to bring the mouse over something that lies right on the border of the screen: you just have throw the cursor in the right direction and it will stop by bumping against the frame of your monitor. It makes things a lot easier, especially for those users who are not that nimble with the mouse. ;)

Back to Mac OS menus: if you move the mouse cursor up on the screen, it stops right over the menus. Clever, isn’t it?

Now that I understand that I can’t help but consider the title bars of maximized windows on Windows a waste of potentially high value space. But there are at least a couple of notable exceptions.

a. Microsoft Office 2007, which allows users to put buttons on the title bar

Office 2007

b. Google Chrome, which dropped the plain old title bar and uses that space to display tabs

title bar hosts tabs

Could that be the beginning of a trend?

Categories: design Tags: ,

Business cards v. 2

November 23rd 2008 Alessandro Bahgat 1 comment

I used to consider business cards pretty much of a nuisance. Collecting tiny pieces of paper just to copy the same data to a mobile phone or contact manager didn’t seem to be practical to me.

But recently I had to change my mind: sometimes you are in a rush and have to quickly exchange contact information. Writing down the information is definitely not an option; typing it into your phone, PDA, laptop is often not practical and exchanging data via bluetooth works 1 time out of 5 (try it on the iPhone :P ).

Even in 2008, alas, in many cases the old solution is much better than the new ones. Is there any way we could take the best of both worlds?

Maybe: the back side of most business cards is often blank. We usually use that space to write some notes, or additional information. But what if we used a part of that blank space to store the contact details in some machine-readable format?

We could use (part of) the back of the card to store an encoded representation of the information which is printed on the front. As an example, the image below shows my contact information in QR-code.

Encoded contact information

Encoded contact information

My phone (a Nokia E71) comes out of factory with a barcode reader which uses the built-in camera to decode printed codes, and there are a lot of other similar programs for other devices and for the iPhone as well.

With business cards like these, we’d still be able to share our details as we do now, but importing contact details to our mobile devices would just be as easy as snapping a picture.

The only downside, in my opinion, is that QR codes are not so pleasant to the eye. ;)

Categories: design Tags: , , ,