Lab Work - 14/09/2017
Part 1 - Q3. (a) & (b) Observations
Mock-ups, wireframes and prototypes would've seemed like massive red tape to me before but after reading the article here, I've realised that these stages are essential in order to add colour to an idea or project and flesh out potential issues early on in the development process. It's analogous to making a sculpture - you don't start carving the detail of the eyelashes into the boulder first, you create a rough outline of the figure as a whole and go from there.
Planning could be seen as a waste of time for those who want to jump right in and "do the do" but in fact, it's more likely to save time overall than anything. Being able to see potential pitfalls ahead of time is crucial for the success of the project cost and time wise.
With all the technology and software (freeware, open source software) available to developers today, there's just no excuse for poorly coded and tested websites. As read in this article, there are literally websites that will test how your website displays on different browsers for you!
Good websites are all about good end user experience. People have short attention spans nowadays. If your website involves too much interaction or is too busy or is difficult to look at in any way, your audience numbers will suffer immensely. You literally have a matter of seconds to reel the user in and if you can't achieve it then, you'll lose them forever.
Part 1 - Q4 (a) Terminology on Twitter
- Lo-fi: I chose this word because I've never seen it used in the context of design before and it was used many times. On Twitter, all I found were references to music!!
- SEO: Searching this acronym on Twitter returned many posts about how to make your website more visible and searchable through search engines. It made me realise how mainstream and important these things are nowadays! The posts I found were mostly by web development bloggers.
Part 1 - Q4 (b) Twitter Follows
- AJ Ghergich (@SEO) - I mean, come on, his Twitter handle is literally @SEO
- Search Engine Land (@sengineland) - Breaking news on all things Google and SEO.
- Moz (@Moz) - Huge following on Twitter and commercially focused in order to drive webpage visits up.
Part 3 - Q1 Analysing the UI
Analysis
- Takes a long time to load / process heavy.
- I personally like the simplistic white background with darker elements in front. Makes everything easy on the eyes.
- There are a lot of different menus which can seem overwhelming unless the user is going to put in time to figure them all out. I'm thinking there should only be a few higher level menus leading to more detailed sub menus for easier navigation.
Analysis
- There's a lot of media (both moving and still) on this homepage meaning it's process heavy and slow to load.
- I like the design, it's slick and professional looking.
- It has a hamburger menu in the top right which leaves less cluttered menus across the top and down the side of the screen. I much prefer this.
- I never like pages that make you scroll way down in order to see the full content. What user ever goes down to the bottom? I'd rather a tidy page where you don't have to scroll far to see all the content - at least on the home page!
- I love this website - it's modern, it's minimalist and it directs your eyes naturally to the objects you need to focus on.
- I really like the nude colour scheme. That's just personal preference though I guess!
- One thing that really bothers me from a UX standpoint is when forms on websites don't tell you that you've put something in wrong until you finish filling out the whole form (and then some even delete the whole form's content when it tells you there's a validation error at the very end!!!!!). Codecademy warns the user on the fly using coloured text and textboxes that a validation has failed. This is a simple but stand out feature from a usability viewpoint. This proves that UI could look great but at the same time UX could be pretty terrible! In the case of Codecademy, I think both UI and UX are fantastic.
Part 3 - Q2
Yahoo
|
Discovery
|
Codecademy
| |
What did
they look like?
|
N/A
- Doesn't display on this website.
|
N/A
- Doesn't display on this website.
|
N/A
- Doesn't display on this website.
|
How did they score?
|
0%
|
0%
|
0%
|
What are the main problems?
|
Page
size and external resources
|
Page
size and format (not a HTML document)
|
Page
size limit and frames
|
Which tool was the most informative/useful?
|
ready.mobi
as it displays the websites through various devices
|
ready.mobi
as it displays the websites through various devices
|
ready.mobi
as it displays the websites through various devices
|
Yahoo
|
Discovery
|
Codecademy
| |
What did
they look like?
|
Bad
on the low tier phone but good but need to scroll across on the rest
|
Need
to scroll across on the low tier phone but good on the rest
|
Not
optimised for low tier phone but displays well on others
|
How did they score?
|
28
passes 10 fails = 73.7%
|
26
passes 12 fails = 68.4%
|
24
passes 14 fails = 63.2%
|
What are the main problems?
|
Etag
Support, Javascript placement and Caching control
|
DOM
too large, Javascript Placement, Frames and CSS measurements
|
DNS
Lookups, Javascript placement, Frames, CSS Measurements, Caching
|
Which tool was the most informative/useful?
|
ready.mobi
as it displays the websites through various devices
|
ready.mobi
as it displays the websites through various devices
|
ready.mobi
as it displays the websites through various devices
|
Part 3 - Q2
a. Accessibility
- Yahoo has some accessibility issues and everything is displayed as it should be.
- The Discovery website seems to have a lot of accessibility issues with large areas not displayed.
- In relation to Codecademy, there are some minor accessibility issues and the display in general seems to be fine.
b. Problems
- The main problems on Yahoo are based around contrast errors, missing or redundant alt text and redundant title text.
- On Discovery, apart from the issues above only a few minor problems like missing alt text, redundant link etc. were present.
- There are some contrast errors, redundant alt text alerts and a few empty link errors on Codecademy.
c. Similar Problems
The websites seem to have some similar issues like contrast errors and alt text alerts.
Follow me on Twitter:
