Usability suggestions

[DaDaDarryl]

Hey guys,

Nice concept - quick and responsive!

I have a few suggestions from a usability point of view: I think that the font control area should be separated from the contrast button to clearly mark that they offer two different functions and are not related, the A's should be the word 'Text' to be more to the point and the icons should be more obvious (if you look at the header you see three large buttons, the icons within the buttons get lost). And also, the text 'Which news source?' could read better as 'Select a news source below.' And also, limit the width of the site as the wider it gets the more difficult it is to read from one line to the next. Oh, I know the source and the section are in the headline above the results but perhaps also highlight the selected buttons for easier navigation.

[tagawa]

Hi @DaDaDarryl

Thanks for the nice comment and usability feedback.

I like your design for the text buttons, but I also like the idea of having all links/buttons on the site a similar shape. I.e. anything clickable is a squarish button shape. I'm meeting with some accessibility friends later this week so I'll get some more opinions.

Limiting the width of the columns is a good idea, perhaps making it a two-column layout for wide screens. I'll try it out on a demo site and see how it looks.

And highlighting the selected buttons — definitely should have that. I've made a separate issue: #37

Thanks again.

[DaDaDarryl]

Cool!

With regards to the buttons, keeping all actionable items a similar style is a good idea. Consider the option of keeping all types of actions the same style e.g. all form Submit/Log in/"proceed" types of buttons one style, all Back buttons another style, buttons that launch an external site, etc. The advantage here is that a user can quickly learn and associate what type of action will occur if they click a certain style of button.

Looking at the font control area now, I think that either having the word 'Text' or the 'Aa' would work, but keep the uppercase A on the side of the '+' button and the lowercase on the side of the '-' button.

Good luck!