I am still working on the original coding for the Services page, and have still to validate that.
I also have still to try setting up the CSS Stylesheet from Lab 3.
I will then alter the CSS code for Lab 4.
Monday 22 October 2018
Blog from Week 4 and Lab 4 (10/10/18) - Part 3 Perception and Attention - B
http://www.scientificpsychic.com/graphics/index.html
Some of the illusions I had seen before, but most I had not, and they really did take a lot of concentration to actually understand what was going on in them.
In relation to web site design, I think it would point towards the need to minimise confusion with the user and ensure all images, graphic designs etc need to be chosen carefully to ensure clarity, especially in relation to colour.
Obviously, the images in the web site mentioned are at the extreme end of illusion, but it does underline that the human mind sees one thing, and interprets another sometimes.
Visual Memory:
It tells me I have a limited perception and memory for shapes, as the furthest I got in the game was about to the 8th query.
I don't believe I used the Gestalt principles during the game-I simply focussed on the dots themselves, although a better option may have been to focus on the empty spaces.
The only usable aspect I can see for the moment is the duration of attention for the web site user may be limited, in particular to imagery, for example, image carousels, are they running too fast, is there too much imagery and text on the individual images? This would all need to be queried instead of guessed at. Also, scrolling advertisements, size, duration, imagery are all very relevant.
Attention and Working Memory:
I think I must be quite attentive, as I noticed the gorilla first time. Howver, I think I may have seen this video before and remembered something unusual take splace in it!
I believe, in relation to HCI, that we must be more attentive to what is visually displayed to the end user, and like Visual Memory, it will vary from person to person. Also, the user can be directed in one direction, but miss other less obvious details. The user can be distracted too (I have no idea how many passes were made, after I saw the gorilla walk across the screen!)
Some of the illusions I had seen before, but most I had not, and they really did take a lot of concentration to actually understand what was going on in them.
In relation to web site design, I think it would point towards the need to minimise confusion with the user and ensure all images, graphic designs etc need to be chosen carefully to ensure clarity, especially in relation to colour.
Obviously, the images in the web site mentioned are at the extreme end of illusion, but it does underline that the human mind sees one thing, and interprets another sometimes.
Visual Memory:
It tells me I have a limited perception and memory for shapes, as the furthest I got in the game was about to the 8th query.
I don't believe I used the Gestalt principles during the game-I simply focussed on the dots themselves, although a better option may have been to focus on the empty spaces.
The only usable aspect I can see for the moment is the duration of attention for the web site user may be limited, in particular to imagery, for example, image carousels, are they running too fast, is there too much imagery and text on the individual images? This would all need to be queried instead of guessed at. Also, scrolling advertisements, size, duration, imagery are all very relevant.
Attention and Working Memory:
I think I must be quite attentive, as I noticed the gorilla first time. Howver, I think I may have seen this video before and remembered something unusual take splace in it!
I believe, in relation to HCI, that we must be more attentive to what is visually displayed to the end user, and like Visual Memory, it will vary from person to person. Also, the user can be directed in one direction, but miss other less obvious details. The user can be distracted too (I have no idea how many passes were made, after I saw the gorilla walk across the screen!)
Blog from Week 4 and Lab 4 (10/10/18) - Part 3 Perception and Attention - A
- Design Blink:
As one of the older members of the class, it would have been embarrasing if I didn't get a low brain age, but I did...
Congratulations! Your Brain Age is 36
I got a low Brain Age
Well done. If your Brain Age is lower than your actual age you are probably doing enough with your brain to ward off dementia
- On Spotit, I scored poorly...less than 6 in the thirty second interval.
.
Blog from Week 4 and Lab 4 (10/10/18) - Part 2 Web Development
I would consider two of the most important aspects of the design process to be SEO/Keywords and Design Theme, to make sure the site is adequately optimised for SEO and also that it is visually attractive.
For Firefox:
From addons.mozilla.org, if would choose
https://addons.mozilla.org/en-US/firefox/addon/seo-website-analysis/, to allow me choose appropriate keywords and try to get the SEO as correct as possible, and by alos examining keywords used in alternative sites.
and try also
https://addons.mozilla.org/en-US/firefox/addon/ultimate-theme-creator/
to get an appropriate theme for my site.
For Chrome:
This seems to be a well reviewed add on for Chrome, to allow correct Keyword choice
https://chrome.google.com/webstore/detail/keywords-everywhere-keywo/hbapdpeemoojbophdfndmlgdhppljgmp
and the following for Theme design
https://chrome.google.com/webstore/detail/material-for-chrome/gokahbgdhhcjfnjlfeiojfmgnoikpcco
For Firefox:
From addons.mozilla.org, if would choose
https://addons.mozilla.org/en-US/firefox/addon/seo-website-analysis/, to allow me choose appropriate keywords and try to get the SEO as correct as possible, and by alos examining keywords used in alternative sites.
and try also
https://addons.mozilla.org/en-US/firefox/addon/ultimate-theme-creator/
to get an appropriate theme for my site.
For Chrome:
This seems to be a well reviewed add on for Chrome, to allow correct Keyword choice
https://chrome.google.com/webstore/detail/keywords-everywhere-keywo/hbapdpeemoojbophdfndmlgdhppljgmp
and the following for Theme design
https://chrome.google.com/webstore/detail/material-for-chrome/gokahbgdhhcjfnjlfeiojfmgnoikpcco
Sunday 21 October 2018
Blog from Week 3 and Lab 3 (3/10/18) - Page Layout and Cognition
Page Layout:
Colspan refers to the number of columns across the width of a table.
Similarly, Rowspan refers to the number of across the length of the table.
For a 3 by 2 table, this would have a Colspan of 3, and Rowspan of 2.
I found fomatting tables quite tricky, especially when rows and columns were merged together in a single table, to visualise and get a perspective of which cells were which.
Cognition:
Had issues with the links page so used Google Search instead.
U.S. News web sites referenced:
www.washingtonpost.com
www.washingtontimes.com
www.bostonglobe.com
www.bostonherald.com
Common Features between all sites:
Hong Kong News web sites referenced:
www.chinadaily.com.cn
www.hongkongfp.com
www.scmp.com/frontpage/international
www.thenewslens.com/
Common Features between all sites:
Colspan refers to the number of columns across the width of a table.
Similarly, Rowspan refers to the number of across the length of the table.
For a 3 by 2 table, this would have a Colspan of 3, and Rowspan of 2.
I found fomatting tables quite tricky, especially when rows and columns were merged together in a single table, to visualise and get a perspective of which cells were which.
Cognition:
Had issues with the links page so used Google Search instead.
U.S. News web sites referenced:
www.washingtonpost.com
www.washingtontimes.com
www.bostonglobe.com
www.bostonherald.com
Common Features between all sites:
- Page Background: all use white, with a black, distinct font type (like a traditional newspaper)
- Trending and Sections all towards the top of the page, under the banner
- Very easy to navigate between pages and articles (drop down menus used)
- Images and videos used relevantly without overloading the load time for the home page.
Hong Kong News web sites referenced:
www.chinadaily.com.cn
www.hongkongfp.com
www.scmp.com/frontpage/international
www.thenewslens.com/
Common Features between all sites:
- Page Background: all use white, with a black, distinct font type (like a traditional newspaper)
- Translation and switch bewteen language options available
- Very easy to navigate between pages and articles (drop down menus used)
- Images and videos used relevantly without overloading the load time for the home page.
I found there to be many similarities between all the sites referenced, I didn't see many differences at least. All keep latest news to the top of the home page, and allow easy and quick navigation.
Flat Design:
Flat Design refers to a more simplified form of design, that uses simpler elements that are emphasised with the use of clean, bright colours.
An example would be www.microsoft.com
Skeumorphism:
Skeumorphism is a contrast to Flat Design, an original, physically real element is used within the design of the web site.
A very old Windows 95 screenshot is an example!
Blog from Week 2 and Lab 2 (26/9/18) - Fish Creek - Part 2 and Part 3
Started on the new web site for Fish Creek, using Notepad++.
All files created locally on my laptop, and tested in Chrome.
Part 2:
Use of Meta Tags in an html document.
All files created locally on my laptop, and tested in Chrome.
Part 2:
Use of Meta Tags in an html document.
- Page Keywords
- Page Description
- Page Author
- Page Refresh time
and in my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="Fish Creek VAnimal Hospital, Fish Creek Veterinarians, Animal Care, Animal Care Procedures">
<meta name="author" content="Raymond Scullion">
<meta name="description" content="Web site for the Fish Creek Animal Hospital, providing local care to the Fish Creek area for Medical Health care, Dental Care, House calls and other services">
<meta http-equiv="refresh" content="60">
<title>Fish Creek Animal Hospital</title>
In order to improve SEO for any site, I would ensure the following;
- Site and Page description Meta tags are accurate and if possible unique to each page
- Ensure the site folders are structured correctly and relevantly, especially if it is a large site
- Using a Sitemap
- Keywords are selected that are relevant and help organic Search Engine results
Saturday 20 October 2018
Blog from Week 1 and Lab 1 (19/9/18)...Part 3
1. Analysing the UI
d. Based on the results given and the detail supplied, I found cc-validator.org to be the more informative of the two.
3. Accessibility
From www.w3.org, Accessibility is defined as
"Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them". But this can also benefit those without disabilities, or with a short term disability, or even with very short term issues, such as bandwidth or connection problems.
To do this, the errors that webaim shows us in particular relate to links, labels, alt tags, and form labels, amongst many others.
In that sense all three sites have issues, but www.argos.ie is by far the worst, and www.khanacademyorg performs the best.
Issues with font size on argos.ie make it particularly difficult to access. Twitter, also showed several broken links, as well as form labels and headings.
www.khanacademy.org was the most accessible of the three, which, given its educational aspect, is not surprising, and performed best in the evaluation.
All three, especially www.argos.ie, could be improved with better links and tags. www.argos.ie is poorly laid out from an accessibility perspective, with little attention given to the User Interface, with the site structure taking precedence.
Using
mobile.css-validator.org and ready.mobi
|
||||
Usability
|
Validators
Appearance
|
Score
|
Main Problems
|
|
www.argos.ie
|
I have used www.argos.ie many
times, and in one sense it is well designed, but in others, it is very poor.
The company are obviously trying to apply the structure of their catalogues
in the site design itself, and this works well, up to a point. I was able to
find specific products easily. Visually, the site is very poor, with small
font size making it very difficult for users, and the menus system (top
navigation) very, very small. It is an unattractive site to look at, but
functional.
|
Using validator.org, the results
for each of the three sites looked clear and precise. It was immediately
apparent what the issues were issues with each of the sites. I found the
presentation of ready.mobi, especially with the actual screen size displayed,
as the better of the two.
|
Scored very poorly on
validator.org, showing 5 critical errors and numerous medium and low level
problems, indicating a need to review the site coding and coding immediately.
On ready.mobi, the site scored reasonably well, but the score was below
average, but showing css errors in particular.
|
Appearance and fonts
Image sizes
Repetition of tags.
Below average scores
Probably needs a full redesign and
new content
|
www.twitter.com
|
I am not a regular user of
Twitter, but from a usability perspective, I find the site (on desktop), easy
to use, with all the information easy to access. Suggestions on who to follow
are easy to see and can be easily refreshed when needed.
|
As above.
|
This site scored well on
validator.org and mid-range on ready.mobi,
but both reported room for improvement of the site.
|
Etag support
Minor errors showing re in-line
CSS
Table rendering
|
www.khanacacemy.org
|
I was totally unfamiliar with this
site before checking it. One of the easiest sites I have ever seen for
navigation around what is quite a large and varied content. Also, the site
seems to draw you in in its usability towards finding new and interesting subjects.
A really enjoyable and usable site.
|
As above.
|
This site scored well on
mobi.ready and validator.org within acceptable limits, but with errors
regarding Etags, Javascript, some use of frames, and caching.
|
Home page size
Caching
Use of frames
|
d. Based on the results given and the detail supplied, I found cc-validator.org to be the more informative of the two.
3. Accessibility
From www.w3.org, Accessibility is defined as
"Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them". But this can also benefit those without disabilities, or with a short term disability, or even with very short term issues, such as bandwidth or connection problems.
To do this, the errors that webaim shows us in particular relate to links, labels, alt tags, and form labels, amongst many others.
In that sense all three sites have issues, but www.argos.ie is by far the worst, and www.khanacademyorg performs the best.
Issues with font size on argos.ie make it particularly difficult to access. Twitter, also showed several broken links, as well as form labels and headings.
www.khanacademy.org was the most accessible of the three, which, given its educational aspect, is not surprising, and performed best in the evaluation.
All three, especially www.argos.ie, could be improved with better links and tags. www.argos.ie is poorly laid out from an accessibility perspective, with little attention given to the User Interface, with the site structure taking precedence.
Friday 19 October 2018
Blog from Week 1 and Lab 1 (19/9/18)...Part 1
Part 1:
1 & 2
Blog and Twitter Account:
I created the Blig and followed dt265 on Twitter, this will allow me update what I have been doing and noting as I progress through the Module.
3.
a. Creativebloq article:
This article outlines the three basic structures involved in web site design:
Wireframing: The least complicated of the process (hopefully). This allows the basic visual structure of the site to be laid out in a block format, using a number of tools:
Mock ups and Prototypes:
This site also a long time to load, with a never ending list of ads and a lot of sponsored ads!
b. Web Developer article.
This article listed 10 common mistakes made by developers. The article is well laid out but I think assumes a certain amount of experience already.
4.
a. I chose Omnigraffle as my Search Term on Twitter.
Suffice to say. I was brought to the company's own Twitter feed, I immediately left Twitter to go straight to their web site for more information on their software.
https://www.omnigroup.com/omnigraffle/
I quickly learned that OG can be used for numerous design and structure functions, as well as web site structure design.
It allows users, within groups or not, to use multiple shapes, designs, layers and text to come up with a working flow chart type diagram. I did not download a copy trial version, but it appears to be relatively straightforward, and the site is clear and well laid out itself.
b. As a beginner at this stage, I chose to follow;
1 & 2
Blog and Twitter Account:
I created the Blig and followed dt265 on Twitter, this will allow me update what I have been doing and noting as I progress through the Module.
3.
a. Creativebloq article:
This article outlines the three basic structures involved in web site design:
Wireframing: The least complicated of the process (hopefully). This allows the basic visual structure of the site to be laid out in a block format, using a number of tools:
- Observation 1: In a practical team sense, this may or may not be helpful if you are using the sketch pad approach, (the software approach may be best) sharing common thoughts may be a problem. Alternatively, if a team is involved, it is a good opportunity to brainstorm ideas, by getting everyone together. It is also a simple means to storyboard the ideas to a client one on one.
Mock ups and Prototypes:
- Observation 2: It appears from the article that there is no unique "best" approach. It would appear that the complexity of the end product should dictate the approach to WF/MU/Prototype and how they can be used. If it was a site that was aimed at an end user in general user sphere (Retail/Ecomm), I would use all three, emphasising usability and clarity in particular.
This site also a long time to load, with a never ending list of ads and a lot of sponsored ads!
b. Web Developer article.
This article listed 10 common mistakes made by developers. The article is well laid out but I think assumes a certain amount of experience already.
- Observation 1: As a beginner in coding, the most obvious mistake I would have made at this stage would have been the compatability between browsers during design. I would definitely keep an eye on this issue during design, using the tools mentioned.
- Observation 2: Time is money. As a commercial site, there has to be a balance between time spent coding, cost, and the end result. This is the same in all areas of Engineering. This would indicate to me the importance of a good initial plan at the very beginning, divide time wisely between, design, coding and testing. I learned there are lots of potential mistakes that I would have been otherwise unaware of.
4.
a. I chose Omnigraffle as my Search Term on Twitter.
Suffice to say. I was brought to the company's own Twitter feed, I immediately left Twitter to go straight to their web site for more information on their software.
https://www.omnigroup.com/omnigraffle/
I quickly learned that OG can be used for numerous design and structure functions, as well as web site structure design.
It allows users, within groups or not, to use multiple shapes, designs, layers and text to come up with a working flow chart type diagram. I did not download a copy trial version, but it appears to be relatively straightforward, and the site is clear and well laid out itself.
b. As a beginner at this stage, I chose to follow;
- @goodwebdesign, hoping to learn some web site tips from this account
- @paddycosgrave, to keep up to date on general web news, Web Summit.
- @thebeeests, for more UI information
Tuesday 18 September 2018
Introduction
Well, the journey begins again.
2.1 in Honours Diploma in Electrical Engineering from 1992, and it seems a life time ago, but now I start all over again.
I'm back to DIT Kevin Street after a 24 year break, starting my Higher Dip. in Computer Science, three nights a week. On this blog, I will assemble my thoughts on the Web and User Interface part of the Course (Wednesday nights).
I guess I will be putting hopefully some of the previous work I have done using Joomla CMS to some use, although I haven't edited HTML or CMS files much.
2.1 in Honours Diploma in Electrical Engineering from 1992, and it seems a life time ago, but now I start all over again.
I'm back to DIT Kevin Street after a 24 year break, starting my Higher Dip. in Computer Science, three nights a week. On this blog, I will assemble my thoughts on the Web and User Interface part of the Course (Wednesday nights).
I guess I will be putting hopefully some of the previous work I have done using Joomla CMS to some use, although I haven't edited HTML or CMS files much.
Subscribe to:
Posts (Atom)