Archive for Usability

{ January 16, 2009 @ 12:37 am } · { Accessibility, Adam Williams, Usability }
{ Comments (1) }

Usability

Navigation

I have tried to make my project as usable as possible by sticking to the conventional standards of website navigation. The main tool in achieving this is the ever-present navigation bar on the right of the page. Users do not have to scroll around too much to find the navigation buttons which makes the process much quicker. I have also kept my levels to a minimum. The users never find themselves in a deep structure having to go up several levels before they find another area of the site. The deepest they go is in the portfolio section where they are just two levels in (portfolio > collection).

 

index page

index page

 

 

Buttons in the portfolio galleries are very intuitive, displayed merely as forward and backwards arrows which flick between images – a common navigational signifier which I think users are familiar with.

Functions

The blog features some familiar controls also with edit and destroy options at the foot of every post. This only appears when the user is logged-in of course. The login function is hidden from plain sight and accessed by appending the URL with ‘/login’. As there will only ever be a maximum of two different people logging into the site: myself and the client, there is no need for there to be a ‘login’ button on the blog. This would only confuse users into thinking they are able to register for user accounts, which at the moment, they are not.

Forms within the blog are again very standard in format. To go to the ‘new post’ form, the user merely has to find the appropriate link at the very bottom of the page. When creating a new blog post, the user is confronted with only two text fields: ‘Subject’ and ‘Body’. Below this is a ‘Submit’ button. Again, because there will only be two users of this blog, the controls do not have to be terribly obvious as long as they are positioned in a sensible and consistent manner for quick recognition and use.

 

New Post

New Post

 

 

Accessibility

I designed my site with a view to simplicity and functionality, and with this comes accessibility. The fact I have used high contrast colouring (black on white) throughout the site means the text is highly readable. I have successfully tested the site using larger font-sizes by adjusting the browser settings and all appears perfectly readable. All of my images include alt tags which means screen readers are able to pick-up the content of the images and navigation links and relay it to disabled users. I have also used appropriate header and paragraph tags to ensure that the textual content conforms to the correct hierarchy. I have seen sites that offer reversed-contrast view which makes the background black and the text yellow to cater for certain types of visual impairment; however there are limits to how far one should go given the purpose of the project.

An Introduction to Wireframes

{ October 16, 2008 @ 11:29 pm } · { Accessibility, Kasper Sorensen, Usability, Web 2.0, web design }
{ Tags: , } · { Comments (1) }

Initially this post should have been titled: “An Introduction to WordPress Themes”, but I felt like I had covered the basics of WP themes in my earlier post. So this is going to be an introduction to Wireframes.

Wireframes are basically the blue print of a website; it doesn’t contain any colour or design features. It is very handy to give yourself and a client an idea of how the final website is going to be. By agreeing on a layout early on in the process, you won’t have to deal with unhappy clients and unlimited revisions later on. Wireframes also allows you to give priority to the actual content, and where to place things like logo and navigation on the page without being distracted by colours.

Wireframes can be as simple as you want them, some people draw them up on paper and leave it there. Other people like me, do them in Photoshop or Fireworks. There are a few examples on flickr that can give you an idea of what it is. The way I do it is to make a list on paper where I write down every important item that should be on the website. Then I Take a mental note of what is the most important, this is mostly the main content, navigation etc. I make some notes about how I would like the layout to be, I usually take a tour around the web to find inspiration. I like to sketch it up on paper before making the final wireframe in Photoshop. I usually just draw very simple shapes and write the dimensions down. (Click to see large version.)

What I specifically did, was to look at the Web and New Media Blog and take a note of the main points. I counted the categories which had the most posts, I did this to figure out what the overall theme for the site was, although I did know this already… Always good to be sure 😉 – I then wanted to find some inspiration, which is why I started looking for other “collaborative blogs” about the web and technology in general. Some of which I liked were Lifehacker, TechCrunch and ReadWriteWeb.

The main challenge was to find a way to make the categories easy to navigate without having to scroll down to the bottom of the page. The nature of collaborative blogs is that they cover a wide range of topics and visitors should be able to find what they are looking for as easy as possible. Which is why I have cut the posts short and provided a ‘read more’ link, to quickly navigate the latest entries?

The other thing with WP Themes is that your creativity is somewhat limited. Because it is a theme it has to be generic in any sense. This means that you can’t just have an image instead of the masthead, it has to contain text as it has to fit nearly every possible blog title.The same is true for the widgets at the bottom, you have to make it as generic as possible, because you have no idea of what kind of content is going to be used.

The final Wireframe:
I’m not entirely happy with it yet, and might make some changes as I go along. I’m especially not happy with the bottom part, but I don’t know what to do about it yet. (Click to see the large version.)

/Kasper – on Twitter and Delicious

Scamper the Web and New Media Blog

{ October 12, 2008 @ 11:52 am } · { Accessibility, HTML, Kasper Sorensen, Usability, Wordpress }
{ Tags: , , } · { Leave a Comment }

As stated earlier I’m developing a WordPress Theme for this website. I have been applying SCAMMPER to my initial idea and these are the thing that I have come up with.

Substitute: The first thing to do will be to come up with a design that will fit the blog. In that process I would substitute the current colour palette and come up with one on my own.

Combine: As this blog have so many categories and covers such a large range of subjects, I will try and combine this list with the Archives list in one column. Because the blog covers so many subjects, I have to assume that the web site will attract a very varied audience. By combining the archives and categories in one column, it will make it easier to find the subject you are interested in.

Adapt: To accommodate for the extra column, I will adapt a three column layout. This will separate the categories and archives from the rest of the content making it even easier to find.

Magnify: In order to make room for the third column I will increase the width of the layout. This will give me more space sideways and utilize the screen real estate of the wide screen monitors better.

Modify: I will modify the current links associated with the tags in each post. At the moment the links point to the official WordPress site, it would make more sense if the links pointed to internal posts on this site.

Put To Other Use: The theme I come up with in the end could possibly be used on all the WordPress blogs out there, just like all the free themes. It is not limited in its use in terms of how many websites can use it. The only criterion is that the website use WordPress.

Eliminate: I will try and eliminate the use of Javascript currently used in this theme. This will improve loading times, and accommodate for users that might have Javascript turned off in their browsers.

Rearrange: I will rearrange the position of the elements used on the blog. This includes search bar, meta data, the calendar etc.

/Kasper – on Twitter and Delicious

Making My First WordPress Theme

{ October 3, 2008 @ 3:24 pm } · { CSS, Kasper Sorensen, Usability, web design }
{ Leave a Comment }

Being a student with interests in both Online Journalism and Web Design, blogging is obviously something that I find interesting. I’m currently planning for my assignment where I intend to make some kind of WordPress Theme for some kind of website, maybe this? Who knows…

Having never made a WordPress Theme before, this will probably be a somewhat interesting project. I have stumbled upon a few people that I would like to talk to before starting out. And I will definately need all the help I can get from around the web and the WordPress comunnity.

Since this project is web related I think I will focus my theme mostly on advanced CSS, browser compatibillity, usabillity and valid code obviously.

Hopefully I will be able to pick up some skills and share my findings and frustrations as I go along, maybe I will even be able to share a few tips and tricks.

/Kasper

CSS and issues of Accessibility

{ January 10, 2008 @ 11:33 am } · { Accessibility, CSS, Katie Butler, Usability, web design }
{ Leave a Comment }

CSS essentially encourages web designers to create more accessible web pages and hence more accessible websites overall – due to the nature of their functioning. CSS as I have outlined in some of my previous blog research, gives designers more control over their HTML pages, for instance they become more flexible, and elements of design can be changed relatively easily to suit a user’s requirements.    Having done some Internet research into accessibility beforehand, I can now identify how my web pages and CSS designs have been made accessible. 

  1. Each page conforms to general usability guidelines, i.e. such as making links distinctive through colour, underlining etc
  2. Each page is cross-browser compatible, and so looks almost identical in IE and Mozilla Firefox etc (http://www.browsershots.org/)
  3. Each page has been optimised to a certain extent (meta tags) so that search engines would be able to prioritise the site more easily.
  4. CSS has allowed me to control content via ‘DIVS’ which effectively separate content, yet still present it in user-friendly ways.
  5. The use of CSS also means that an alternative font will be displayed with regards to all text, if the current one is not installed on a user’s computer.

 In my designs I have also used a wide colour range, and it is always useful to check these colours with VisCheck.com to guarantee that people who are visually impaired (i.e colour blind) can still see some form of colour at least, ensuring then that they are not missing out on any important information as a result of this, for example the page’s links. This is a quick task that I have used before in previous projects and is another valid way to enhance accessibility. (See Appendix 1 for results of this testing)

Inspiring Websites

{ November 2, 2007 @ 11:34 am } · { Marc Taylor, Usability, Web 2.0 }
{ Leave a Comment }

(Http://www.last.fm) The redesign of last fm doesn’t include the switch button that changes the navigation and the heading text to black. I think this design would work well as there is limited colour, and so when audiences upload their work, there wouldn’t be a huge contrast or mess in colours and design. I like the navigation, as it is a standard tab layout like that of Amazon.com, Play.com, Facebook.com and Myspace.com

——————————-  

(Http://www.myspace.com) Myspace’s new home skin replicates a design similar to that of Last fm and Facebook, offering users a layout that is becoming more universal with web2.0 (customisable) websites.

———————————–  

(http://www.facebook.com) Facebook has become a generic website in its blog like structure. It has a very busy interface, in which I feel is too cluttered.

————————————  

(Http://www.purevolume.com)  Purevolume is an inspiring website, because I like the layout of the website, as well as the design aspect of it. The website contains a lot of information on bands yet the minimalist look works well (compared to that of facebook and myspace).
————————————

(http://www.monster.co.uk) Monster.co.uk Design is the biggest competing website, however I feel the design aspect of the website is terrible. It has too many colours, combined with far to much to look at, making the website look unappealing to audiences.

———————————————–

(Http://www.jobcenterplus.gov.uk) Jobcenterplus is another competing website in which the design aspect I feel could scare away student clients. Its colours creates a few accessibility issues with colour blindness, and the website as a whole looks uninteresting and unappealing to students within the arts industries.

—————————————————

Appendixes

(Appendix1- Windows Vista) http://www.vista-skins.com/downloads/Aerox-1-0-For-Windows-Vista-large.png
(Appendix1 – Windows Media Player 11 default skin) http://www.rinero.it/public/Windows_Media_Player_11.jpg  
(Appendix 1Http://www.apple.com website) http://www.apple.com

(Appendix 1) These are the design inspirations as mentioned in the proposal. All these designs are popular at the moment in the design industry. Web2.0 as mentioned however focus’s on minimal interfaces (as in the graphic design aspect and not how much information they can fit within a page), which I feel works well for CMS systems, but it also needs to include some style and look to attract artistic individuals to join the website.

Marc

http://marc.izonedesign.co.uk

PHP Project

{ October 25, 2007 @ 1:25 pm } · { Lee Aplin, PHP, Uncategorized, Usability, Web 2.0, web design }
{ Leave a Comment }

After spending a couple of weeks looking into PHP in some detail, obtaining materials to help me get started, and getting all the necessary knowledge, I have decided that I would like to do my project in PHP.

I feel that I have a good base to work on for learning PHP, with good knowledge of HTML and CSS. I also think that learning PHP will be a good advancement of my skills. With more and more websites becoming increasingly interactive, users may feel cheated to visit a website which has no interactive content at all.

This experience with PHP will also be extremely useful to contribute towards my final year project which is a PHP heavy online community.

My idea for this module is to build a small PHP based website which will have a user login option where users can enter their own areas and upload material such as music or small files. This will mean I will also have to learn and gain experience using MySQL. As I mentioned in a previous post, MySQL has given my problems from the installing stage, but I hope that when everything is working properly, there will be less problems.

The subject of my website, I have yet to decide, but I think that it will be easy to base the website on anything I choose closer to the deadline. The HTML element of my website should not pose too many problems, so I am free to experiment with PHP a little more. This means I may be able to add small extras to my PHP script which makes the website that little bit better. For example, adding a remember me feature onto the login section makes the website easier to access for regular users. Small additions such as this encourage people to visit the site more often, as well as making the experience easier and more enjoyable for them.

My next step will be to further research online communities and see how they work, in order to begin planning my own project. Hopefully I will be able to lift a lot of the work from this project and save myself time in my production project.