Wednesday, December 5, 2012

Latest Update: More screen space for the grading app!

I do just about everything for EssayTagger on my MacBook Air. The default screen resolution of 1440x900 makes the grading app look great. There's plenty of space for everything.

But one of the more pressing items on my to-do list was to address the needs of users with more cramped screens. I set my MacBook's resolution down to 1024x768 and figured out how to make the grading app fit a bit more comfortably in that constrained space.

First, here's how it originally looked on small screens:


I realized that horizontal screen space is much more valuable than vertical screen space. I don't like how cramped the essay pane is on low resolution screens. The essay pane is where all the action is, so to speak, so it should have a much larger share of the screen real estate.

The "Quick Tips" bar on the far right is part of the problem. It doesn't seem that wide, but once I moved it I was a lot happier with the spacing:


That's so much better! The essay pane looks more like an actual essay now.

And I was able to program the new Quick Tips bar to roll out when you move your mouse over each help topic:



This all may not seem like much, but it makes me happy when a simple little change can have a significant usability impact.


Next steps
I'm hoping to revisit more of the screen spacing during winter break. I don't like that on lower resolution screens you have to scroll to see all of your quality levels. The right-hand rubric element pane can be slimmed down some and I think can eek out a few more pixels of screen real estate here and there.