Suggestion for cleaning up post header
GoogleCodeExporter opened this issue · comments
I was looking at the post headers we have now and they just look really, really
crappy and, dare I
say it, LIKE THEY WERE DESIGNED BY A CODER!
So how about something like this? All the information is there, just removed
all the borders. Also
note the small gap in picture 4 between the post header and next/prev links.
Not 100% happy with this either, but it's more pleasing to my eye at least.
Original issue reported on code.google.com by mikko.ur...@gmail.com on 18 Aug 2008 at 4:56
Attachments:
- [Picture 3.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-0/Picture 3.png)
- [Picture 4.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-0/Picture 4.png)
I agree that the current ones are not very nice.
Although your suggestion is an improvement, I think they have too much empty
space in
them now. I'd rather see something more compact.
Original comment by jjhel...@gmail.com on 18 Aug 2008 at 5:32
How about this then? Made the title a bit smaller and reduced margins.
Original comment by mikko.ur...@gmail.com on 18 Aug 2008 at 10:09
Attachments:
- [Picture 6.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-2/Picture 6.png)
- [Picture 7.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-2/Picture 7.png)
It's still 2x too tall. Can we split the "add fave" button out so that it
doesn't
make the whole box higher?
For example we could put add fave button under the poster icon. Or create
another
avatar cell -like thing on the right side of the box.
It looks too empty now.
Original comment by jjhel...@gmail.com on 19 Aug 2008 at 6:17
Well, I'd love to have proper image buttons for add fave & unfave. But, how
about something like this then?
Actually, maybe put the button below the number of faves.. but you get the idea.
Original comment by mikko.ur...@gmail.com on 19 Aug 2008 at 10:03
Attachments:
- [Picture 8.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-4/Picture 8.png)
- [Picture 9.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-4/Picture 9.png)
That's more like it, YEAAAHH <think of CSI Miami here>!
To make it perfect, I'd like modify the way # of faves is displayed. Having it
under
the "add fave" button somehow makes it look imbalanced. I don't know exactly
where
to put it, somehow I'd like to see it either on the right or left side of the
button.
Or maybe put the number inside the borders of this button..?
Original comment by jjhel...@gmail.com on 19 Aug 2008 at 5:14
I liked the idea of having it inside a single border better. That's implemented
in r253.
I wouldn't actually go any further with this - if this gets tons of flak, we
should just ask one of our artists to
design something. Would probably save everyone's time :)
Original comment by mikko.ur...@gmail.com on 19 Aug 2008 at 8:33
Original comment by mikko.ur...@gmail.com on 19 Aug 2008 at 8:41
- Changed state: Fixed
"add fave" doesn't look like a button now btw. can we underline it or
something?
Original comment by jjhel...@gmail.com on 20 Aug 2008 at 3:30
Yeah that's a known issue. Here are three alternatives, not sure I like any of
them any better.
The underlined one with no button border (picture 12) is the cleanest, but
there's a slight usability thing there -
it looks like a link but isn't, and you don't get the hand cursor or anything.
Of course part of this is due to the
fact that it's a HTML form. We could of course refactor the fave forms into
normal links which would give us a
proper link for add fave/unfave.
Original comment by mikko.ur...@gmail.com on 20 Aug 2008 at 6:33
- Changed state: Accepted
Attachments:
- [Picture 10.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-9/Picture 10.png)
- [Picture 11.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-9/Picture 11.png)
- [Picture 12.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-9/Picture 12.png)
Hmm, I like Picture 11.
Someone once told me that you shouldn't use hypertext links for operations that
have
side-effects (i.e., update DB). You should use forms and buttons for those.
Following that train of thought, a button would be better than a link.
Not sure if this guideline applies in the year 2008 though.
Original comment by jjhel...@gmail.com on 20 Aug 2008 at 6:50
Well, picture 11 is what you get in r256. :) Gave it another look and it's ..
okay. I did come up with one more
suggestion though, see attached screenshot.
Original comment by mikko.ur...@gmail.com on 20 Aug 2008 at 6:59
Attachments:
- [Picture 13.png](https://storage.googleapis.com/google-code-attachments/saastafi/issue-66/comment-11/Picture 13.png)
Yeah, I like the separator.
In addition to the separator, can you also add some padding between add fave
box and
the title text? See the attached screenshot on how it should NOT look --
there's no
padding between the fave box and post title.
Original comment by jjhel...@gmail.com on 20 Aug 2008 at 7:51
Attachments:
<horatiocainevoice>
Fixes in r258...
...miami style
</horatiocainevoice>
YYYYEAAAAAAAAAAAAAHHHHHH
Original comment by mikko.ur...@gmail.com on 20 Aug 2008 at 8:43
Original comment by mikko.ur...@gmail.com on 20 Aug 2008 at 9:33
- Changed state: Fixed
Sorry, r259 is da bomb. Added a little more padding to the right of the the
title as well, looks pretty good to me.
Original comment by mikko.ur...@gmail.com on 20 Aug 2008 at 9:35