Whitespace. How is whitespace used on the site?
Mostly used for the blog posts further down the page – stands out from the grey background at the top. Not a lot of whitespace at the top of the website except in the fonts (which make them stand out).
Colour. What colours are used and what impression do they give? Use http://www.checkmycolours.com/ and http://graybit.com/main.php to check colour scheme of site;
Mostly blue, white, grey, green. Very little red (only hints of it in the logo) Different shades of blue of varying hues and saturation creates contrast – fairly nicely matched. Red heavily associated with Romney and ‘backwardness’/negativity. Romney’s perspective is red on the ‘issues’ page.
Check my colours:
Testing done on 413 elements
Luminosity Contrast Ratio: 40 failures
Brightness difference: 31 failures
Color difference: 157 failures
Graybits is failing to come up with results (page won't load).
Graphics: Is the website very graphics intensive?
Header is mostly a graphic (photo with email/zip form overlay) and eye-grabbing. Not a lot of graphics in ‘issues’ section. Amount of words per issue is quite small and broken into sections a lot – makes it easier to scan.
More in-depth articles/information about issues requires quite a lot of clicking. Images used as links with text overlay. Partial blog posts are visible as reader scrolls down the main page and contains a few photographs (maybe 1-2 per entry of varying sizes)
Scanability of the front page: Is there too much information on the front page? Are the headlines well written?
Clear, simple, concise headings with running theme (‘Get XXX’) Opens out to slightly more complex menu but catchy, simple headlines on ‘blog’ section. Blogposts down the page have simple, informative headings. Pretty readable. Font size is sans serif (looks more modern) and comparatively large. Substantive material not easily accessible.
Accessibility options provided. E.g. If the site is graphics heavy or uses flash are alternatives provided? Is the site W3C compliant?
Uses a bit of flash for pop out menus but not too much. No visible options for text only or services for disabled people.
Changing colour, hover menus, drop down menus → nothing particularly animation heavy or interactive but smooth
W3C validator: 60 Errors, 2 warning(s)
Organisation schemes of the site
Organisation schemes → the way information is organised.
Combination of ‘subjective’ and exact organisation. Blogposts are organised chronologically – allows for the most recent developments to be seen first. Search bar = ‘known item’ searching? Toolbars are organised by ‘topic’ and ‘task’. Organising by ‘task’ encourages participation by the viewers of the webpage.
Organisation structure of the site
Organisation structure – the intangible structure of information. Toolbar takes a ‘top down’ hierarchical approach – beginning with very general categories and opening to more detailed links. Favours deep hierarchy instead of breadth, which makes the website toolbar and header look less cluttered and overwhelming. Metadata (tags) at top of blog post to allow users to search through topics.
The ability to share the page via social bookmarking sites (including if there are too many options)
‘Join the campaign’ plug on Facebook on the sidebar. You can share blogposts on Email, Facebook and Twitter. More ‘connect’ options at bottom of the page with large range of social networking sites - good idea and does not seem too overcrowded. Disqus loaded for commenting on blogposts but ‘comment’ option not given in the homepage view of the blogposts (instead there’s ‘join now’, ‘donate’). Viewer must be redirected to blog post to comment
User feedback. Does the site give interaction feedback? Does it need to go back to the server to get info or does it use AJAX type techniques?
Barely any AJAX on website → webpages have to reload every time (except for some forms eg. donate form)
Scrolling ‘topic’ bar allows for different issues to be repeatedly presented to readers.
Whitespace. How is whitespace used on the site?
Not a lot of whitespace for large areas – used more as highlights (white text, white form boxes) and white/grey strips running across the site
Colour. What colours are used and what impression do they give? Use http://www.checkmycolours.com/ and http://graybit.com/main.php to check colour scheme of site.
Red, blue, white, grey. White header with blue buttons and red ‘contribute’ button. Red used as highlight buttons.
For some reason, Check My Colours can't reach the website. Graybit isn't working at all
Graphics. Is the website very graphics intensive?
Quite graphics intensive– photo links and the large graphic running as the header like Obama’s website Use of infographics on ‘issues’ page but offset by comparatively heavy, small text when covering substantial material – not very ‘scannable’.
Scanability of the front page. E.g. Is there too much information on the front page? Are the headlines well written?
Toolbar not as noticeable, even though it’s also an ever-present one and larger than Obama's (maybe because it's grey...?). Four main links in the toolbar (I feel like the webpage changed the number of links between writing this and checking the website again...but can't be sure).
Smaller news/blog feed → looks cleaner as a smaller box, but there’s no option to scroll through past news stories Lots of different fonts – somewhat strange to have two in the same ‘space’ (the blue bar above the main photo header). Succinct headlines.
Accessibility options provided. Is the site is graphics heavy or uses flash; are alternatives provided? Is the site W3C compliant?
Pretty graphics heavy. Social networking sites are linked by buttons and not text. No visible/obvious option for text only or voice reader.
W3C validator: 73 Errors, 14 warning(s)
Organisation schemes of the site
Mostly subjective organisation scheme – website divided into topics and tasks. ‘Featured’ section is chronological (most recent news is ‘featured’) but gives no option to access past news so it doesn’t really give a sense that it’s chronological.
Organisation structure of the site
Definitely favours deep browsing – clicking required for almost all elements on main page. ‘Featured’ sections box doesn’t let you scroll to read the rest of the text…HTML fail. No metadata (tags) visible in main page.
The ability to share the page via social bookmarking sites (including if there are too many options)
Nice buttons for social networking sites (looks cleaner). Requires people to be familiar with logos. Can share news stories on Facebook, Twitter, Google+ and email. More social networking sites at bottom of the page
User feedback. Does the site give appropriate interaction feedback? Does it need to go back to the server to get info or does it use AJAX type techniques?
Uses a little AJAX (mostly scrolling through tabs and ‘featured’ news section). Probably more than Obama’s site.
DEFINITIONS (based on Morville P & Rosenfeld L (2007) Information architecture for the World Wide Web, chapter 5 'Organisation Systems'. Publisher Sebastopol CA: O'Reilly c2007.
Organisation schemes – the way information is organised
- Complementary combination of organisation schemes often required for certain information
- ‘Exact’/Objective organisation schemes: Divide information into well-defined and mutually exclusive sections. Requires ‘known-item’ searching (ie. knowing what you want to search for before you start)
- Examples: Alphabetical, Chronological, Geographical, Metaphorical
- Ambiguous organisation schemes: ‘Subjective’ organisation schemes.
- Difficult to maintain and design but often more useful than exact organisation schemes because people often don’t know exactly what they want
- Items grouped in intellectually meaningful ways and supports associative learning
- Examples: Topic, Task (eg. edit/buy/sell), Audience, Searching by ‘subject’, metaphors, hybrid
Organisation structure – the intangible structure of information.
- Examples: Top-down approach (hierarchy/taxonomy) → Classifying kingdom/family/genus.
- Narrow/Deep hierarchy. Deep = limited categories that expand to reveal more information (problem: too deep = impatience) Most important/general information seen first.
- Database – ‘Bottom-Up’ approach. Collection of records. Linked to information through metadata (tags)
- Hypertext –nonlinear way of structuring information. Consists of items or chunks of information that will be linked and the links
- Social classification – free tagging, mob indexing (questionable whether they can be used widely as techniques)
AJAX – Rich feedback. Sending limited amount of data to server (page doesn’t reload when you click on links)
No comments:
Post a Comment