Style

The Project

Description

Soylent News is not merely a feat of software engineering but a work of art. "Style" is a quality assurance project concerned with how the website looks, feels and functions. Our aim is to produce the slickest, best looking, easy to use user experience whilst preserving all the functionality that the community puts into place.

Scope

To guide the development of the site with respect to:

• Heuristics: the workflow of the site needs to be intuitive and efficient. The user should need to perform a minimum of actions to achieve each task, and the steps should be intuitive. Our task is to define these workflows, assess the performance of them on the site and direct changes accordingly.
• Appearance: the site should reach the best possible standards of visual appeal, subject to its main purpose of article presentation and peer review. Our task is to develop a set of user interface guidelines to guide developers, including placement of elements, font selection graphical styles.
• User Experience: the final arbiter of the success of our work is the community. Our task is to assess the quality of our work by monitoring the usage of website elements, studying user workflow patterns and giving the community the opportunity to give feedback on style related matters.

We direct, coordinate and liaise with all of the creative groups of the project (Coding, FrontEnd - CSS/HTML, Graphics, Core content creators - Editors and Posters) to ensure that all development of the site works towards a common goal of being the most awesome thing ever to happen to the World of Nerd.

Members and Roles

• MrBluze - Overlord
• ragequit - CSS / JQuery
• mtrycz - User Interface
• CynicGalahad - Website Design
• FrogBlast - Art
• xlefay - IRC

Recruiting

We are interested in people wanting to help who have skills in:

• Graphic design - for critical appraisal, or assistance in the art department.
• User interface design
• Mobile app development

Contact

style@soylentnews.org - NB: Not working. Contact via #style at irc.soylentnews.org

Work in Progress

Typography

Paragraph element: This needs to be narrower in all cases: .intro p, .full p { margin: 0 0 0.4em; }

Identified Problems & Wish List

Color

• Red theme is ok, however color contrast is excessive on wide gamut displays, especially some Apple devices.

Theming

• User selectable themes

Usability

• Comment submission - The article summary and the entire thread to which the comment replies should be visible when writing a comment.
• Bug #51 - Tricky main page navigation - This appears to be an ambiguity issue. 'Yesterday's News' should not have directional arrows surrounding it.
• Bug #20 - Scroll bars on 800x600 screens - Do we need a low res (single column) version of the site? Which functionality needs to be 'buried' for this? Need to discuss.
• Bug #22 - Navigation --> Past Polls ==> Submit Poll : Goes to same page as Navigation --> Submit Story; In other words, submitted a poll makes it looks like you are submitting a story.

Resources

Human Interface Guidelines

Apple

• IOS 7
• OSX

Microsoft

• Guidelines

Comments on Human Interface Guidelines

The layout of elements on a website is influenced by the OS on which the interface is being designed. On the other hand, for the user, the right pattern of mouse / finger actions can differ depending on which OS is in use and the location of utility buttons on devices. Therefore it's not enough for the website to render correctly on different browsers. The workflow has to take into consideration:

• The size and orientation of the display.
• The pointing device
• Location of utility buttons, especially soft buttons such as browser config / bookmarks toolbars.

Related Areas

CSS Work - CSS Working group for soylentnews.org