I think I’ve finally got it. In my last post we struggled with finding the compromise between aesthetics and usability. We failed. The first two iterations were stunningly cool but had major usability problems.
The third iteration—which I was quite certain would be it—was infinitely more usable. The design was crystal clear. Unfortunately, it was as boring as a bureaucrat brushing his teeth—for an hour (well, who knows, maybe that would be interesting.)
So I promised, in the comments, to strive for a cunning compromise that hit the sweet spot between usability and beauty. What you see above these words is just that, at least, I think so.
But please, hack away at it. Tear it to pieces in the comments!
Looking good. Some comments/questions:
Assuming the paper grows with more coursework, would it make sense to put the target grade at the top underneath the navigation bar? If there is more coursework than can fit on the screen, it looks like you'd have to scroll to see your target grade.
Would it be useful to display the current grade somewhere?
FWIW, I think you're starting to spend too much time in Photoshop at this point. You can get your mockups to where you think you've "nailed it" until you actually start clicking around and using it day to day – then you find out that it still needs a lot of ux work.
You're highlighting the recent entry, which is in the past. It's probably in the recent past, but it's done and over nonetheless. The focus of this view should be on your "next action" so to speak. So, I'd like to see you swap the focus. Gray out the "I got" score(s) because there's nothing more you can do about that, and focus the next upcoming one. Then progressively fade down into the future – the stuff that is less relevant and less actionable.
Finally, these are little nit-picks, but the curved drop shadow is too strong. It makes it look like the paper is /very/ warped. There should also be at elast some drop shadow across the whole bottom of the paper. If it's dimenional, it's dimensional all over. Also, I'm not sure if you're planning on putting a custom skin on the toolbar to match that green gradient, but I would recommend sticking with Apple's built-in gradient and just tinting it green. That'll give it a more "built-in" look and increase overall build quality feeling to the end user.
Grab the Teehan & Lax PSD for comping up iPhone screens in Ps. That way you'll match the built-in components and not waste time rebuilding them yourself: http://www.teehanlax.com/blog/?p=1628
Keep up the good thinking and get into Interface Builder and XCode as soon as you can! The more prototyping you do in XC and IB, the faster you'll get at it and the more effective you'll become.
It might make sense to put the target grade at the top. Although the potential for coursework growth is limited to the number of items on the syllabus, I can imagine some syllabi being unusually long, in which case the current design is flawed.
Another possibility, which I have tried already and may try again, is to lock the target grade to the bottom of the screen.
Never thought of including current grade. It may be useful. I always worry about adding unessential features but I'll do some user research on that (maybe some user testing; one with, one without).
First, I can't tell you how much I appreciate ya'lls input (ya'll being the UX gurus at <a href="http://weareuproar.com/).” target=”_blank”>http://weareuproar.com/). My goal in this blog is to get a discussion going concerning the real issues that iPhone developers face (using an ongoing case study) and what is a discussion involving only one mouth?
I think you're right about sweating over the details of the design before being able to actually use it. New insights will come through actually using the application day-to-day. What I have neglected to say is that I have actually been on a few-month-long design hiatus up to a few days ago. I've been spending most of my time coding and am a fair bit along. These few days have been a much needed break from coding (having been attempting to exterminate an infuriating bug for too many hours).
I think the time spent wasn't completely in vain. While I shouldn't have worried so much about the aesthetics (as the skin is bound to change), I think I saved myself some coding time by determining—through user testing—that no one was getting the status bar in the older iterations. Now I don't have to code that.
As for your comments on the design, I think they make sense and will definitely refer to them in my next iteration. Believe it or not, I actually started with that PSD template and ended up customizing everything to the extent that it became unrecognizable. I agree that sticking with standards saves time and often makes sense, there is something to be said for having a unique look—which, in itself, is the subject for another post.
Jonathan Smiley of http://www.zurb.com has put in his two cents on Zurb's awesome feedback-gathering site Notable (http://www.notableapp.com), still in beta. Check it out here: http://www.notableapp.com/website-feedback/4913/T...
Thanks Jon!