Thoughts on Usability

  • Idea
  • Updated 3 years ago
  • 2
After some frustration with how the UI works on small screens (see some of my comments in various threads here), I decided to finally just put my code where my mouth is and do a custom stylesheet (Stylish) for NB.

https://gist.github.com/3353977

I'm sure not all my ideas are perfect, but I wanted to give the devs a chance to see what one user thinks is a nicely tweaked UI. And who knows, maybe other users will benefit by way of being able to steal some of the tweaks themselves.

Here is a comparison without and with the tweaks. This is on a pretty average-sized (1280 wide) screen, too; they are much more striking on, say, my netbook screen.

http://i.imgur.com/lZymu.jpg

Reasoning and more thoughts are in the comments of the file. Some additional thanks are due to the NB devs for making a DOM that was easier to tweak than just about any other I have seen!
Photo of ojiikun

ojiikun

  • 308 Posts
  • 43 Reply Likes

Posted 3 years ago

  • 2
3 years ago
Photo of karen

karen

  • 178 Posts
  • 31 Reply Likes
Hooo boy, thanks for this! I just spent WAY too much time fixing NB some more. Some things that have bugged me for quite a while have been tweaked (mostly making less important things actually look less important): 





/*FEEDS*/



/*de-emphasize Green unread count, make font black and normal*/


.unread_count_positive {


    color: #303030;


    background-color: rgba(85, 159, 77, 0.25);


        font-weight: normal;


}



/*de-emphasize Yellow unread count, make font normal*/


.unread_count_neutral {


    background-color: rgba(249, 199, 42, 0.25);


        font-weight: normal;


}



/*de-emphasize favicons*/


img.feed_favicon {


    opacity: 0.5;


}



/*RIVER*/



/*de-emphasize hidden stories marker in title*/


span.NB-story-title-indicator-text {


    background-color: #d6d6d6;


}



/*Make read Yellow story backgrounds light grey*/


div.story.NB-story-title.NB-story-neutral.read {


    background-color: #ebebeb;


}



/*Make read Green story backgrounds light grey*/


div.story.NB-story-title.NB-story-positive.read {


    background-color: #f1f1f1;


}



/*de-bold unread story titles*/


#story_titles .story a.story_title {


    font-weight: normal;


}



/*decrease feed title size*/


#story_titles .NB-feedbar {


    font-size: 13px;


}



/*ARTICLE*/



/*decrease size of yellow floating unread count over article*


span.unread_count.unread_count_neutral.unread_count_full {


    font-size: 11px;


    font-weight: normal;


}



/*decrease size of green floating unread count over article*


span.unread_count.unread_count_positive.unread_count_full {


    font-size: 11px;


    font-weight: normal;


}



/*decrease size of red floating unread count over article*


span.unread_count.unread_count_negative.unread_count_full {


    color: #4f4f4f;


    font-size: 11px;


    background-color: #d6d6d6;


    font-weight: normal;


}
  • 2

Related Conversations

Powered by Get Satisfaction