Archive for Accessibility

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.

Advertisements

Planning and Managing Projects

Planning and managing projects can sound really dull and it almost certainly makes you think of piles and piles of administrative paperwork. But it doesn’t necessarily have to be, in fact when you are working on your own or in small groups; I think you can do too much planning and managing. Planning is always good, but if you do too much it can start to detract from your final outcome. You get set in stone and try to work around your planning in order to make it fit your project instead of using that time creatively on your project.

There are many tools and charts out there that will help you manage your projects. But if you were to use all of them, you could do nothing but plan. I think it’s important to filter out and selectively decide what planning and management you want to apply to a particular project. There was a great article on FreelanceSwitch the other day about pricing freelance work. This could be applied directly to you planning of the project, larger expensive projects involving a lot of work needs to planned more carefully than quick and cheap work.

I have personally found that most of the planning that you do with using charts is exactly the same planning that goes on in your head when you start thinking of a project. Most of these criteria are the source of your project idea. Why did you get the idea ion the first place, because you saw some kind of gab in the market or someone asked you to do it.

I think these charts are great for larger projects to manage people and tasks. For freelancers and smaller companies I think there main use is to show to clients. It shows that you are professional and they can see approximately how long a project will take.

I have included some of my charts below which I have made to analyse my WordPress Theme project. I’m glad that I didn’t do this at the beginning of my project, because I think that would have limited my creative process. I simply didn’t know enough about the possibilities of this projects until I started working with it in detail.

SWOT Analysis

A SWOT analysis measures a business unit, a proposition or idea; a PEST analysis below measures a market.

Strengths Weaknesses
  • Better usability
  • Easier to navigate
  • Better design
  • Improved author profiles
  • Niche market
  • Content specific
  • Limited scope for design
  • Customization could break layout
  • WordPress specific
  • Small market
  • Can’t offer 24/7 support
Opportunities Threats
  • Expandable market
  • Community development
  • Limited competitions
  • Self branding
  • Recognition
  • Competitors
  • Future software upgrades
  • Untested model

PEST Analysis

The PEST analysis measures the market and the users of your product.

Political Economical
  • GPL Licensing
  • Open Source Movement
  • Comment moderation
  • Freelancers
  • Web Professionals
Social Technological
  • Bloggers
  • Online community users
  • Open Source movement
  • Form strong community bonds
  • Tech savvy
  • WordPress users
  • Untested model

Gantt Chart

Developed by Henry Gantt as a tool for displaying the progression of a project.

kasper-gantt-chart

/Kasper – on Twitter and Delicious

An Introduction to Wireframes

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

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

CSS and issues of Accessibility

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)