Thoughts on Usability

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!

2 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;   
}