Where did you last click ?

Please, when designing UI’s make the most important things on a page so you don’t have to scroll for them. Not everyone has giant screens, and even for those of us who are lucky enough to be rocking the world at giant resolutions, we may not like to have the browser maxed out to the full screen resolution.

Think of the actions on the page and group everything so you don’t have to max out your browser window to reach the most used elements on the page. For example, I’m typing this post in wordpress, and arguably the most important things are giving it a title, content, then saving it right ? Nice and easy your eye follows a visual flow, and you didn’t have to go for the scroll bar.

Blue - common eye track/data entry path
Red - mouse movements

Now lets refine the thinking a little more. Same deal with gmail, open it up, compose a message. Notice there’s two send buttons, one at the top of the page not more than 100-200px away from the compose email link ? So where you last clicked was likely exceedingly close to where you need to click next. OR if you happen to be writing a novel and have scrolled to the bottom, you don’t have to scroll back up to the top, as there’s a send button there also.

Now, try posting a message in Basecamp without scrolling - and without cheating by having lots of vertical pixels. If you’re running a giant screen size drop your browser down size to what mere mortals use, notice the distance from where you clicked on messages, to the send button ? (Particularly if you’ve got a couple of companies of contacts to click through!)

Do more than a couple of messages a day and question to yourself, why is arguably the least important things in a message (milestone, attachment) taking up valuable real estate forcing me to scroll.

No one likes a bitchfest, so being a little constructive - why not use that blank space on the right of the message pane to pick your people and send. Even better, have the people field as a text entry area with auto complete items to cut down on clicks. Keep all the important functions clustered above the fold and cut down on the scroll and click!

4 Comments, Comment or Ping

  1. It’s no excuse for a good interface, but relevant keyboard shortcuts are a huge boon to power users. I use the Mailplane application for Gmail, which makes it almost completely operable from the keyboard (even more than the built-in Gmail key commands).

  2. admin

    Agreed, makes a huge difference going to short cut keys.

    Back in the day long ago I worked for a software company that was rolling out a windows replacement of a DOS package.

    Could you imagine the backlash asking people to move from keyboard to mouse ? That taught me one thing, apps that are used day to day have to be as fast as humanly possible, particularly if you are trying to integrate into a daily workflow.

    These guys could navigate this particular dos app blind with one hand tied behind their back so long as they would touch the keyboard (old school number entry style menus). It didn’t matter that the new windows app could do 100 times more things, the core functionality had to be as fast as the old DOS app.

    I think it’s a valuable lesson that we just don’t see in the web world.. gmails support for key commands rocks if a little hard to memorise. Mailplane looks like an awesome product - thanks for posting about it !

    As we move forward I hope to see more and more apps paying attention to this stuff, it really does make a huge difference. Especially if you’re trying to tout web apps as the replacement to desktop bretheren.

  3. Just playing devil’s advocate here to your Basecamp example. I think roughly 80-ish percent use a mouse-wheel to scroll. But I do agree there should be a way to submit the form before the optional elements are presented.

    I will agree with both of you on the keyboard shortcuts. I don’t know what project I would still be on if they weren’t around. Goes to show why Quicksilver.app is so popular among Mac users. No click-edy-click around the Finder, or what replacement have you, to find that one app you want to launch. Just a few keystrokes, rapid fast.

    It would be a great help for web development if there were a standard for available key combinations for web apps. Cross-platform and cross-browser support of these is somewhat frustrating at times.

  4. admin

    @Geoffrey. Dude you just changed my life. Mailplane KICKS ASS, in a manner of words. Growl for gmail - holey schmoley.

    @Sam - unless you keep going through mighty mice which tend to have the scroll thingy die. (it’s my belief that the scroll wheel kills tendons, that constant up and back action on one finger can’t be healthy)

Reply to “Where did you last click ?”

About

Rowan is a Product Development Manager, specialising in architecting, developing and putting web applications into production - in particular Ruby on Rails based apps. He lives in Toronto, Canada but speaks in a funny accent as he's originally from New Zealand. He's been working in the software and web business for over a decade. This blog covers Web Application development and deployment in the real world, dealing with topics from business fundamentals to Ruby on Rails, Merb, PHP, Flex, MySQL, Apache and more.

Read more ...

 

 

View Rowan Hick's profile on LinkedIn

 

Subscribe to my RSS feed