1,136
edits
Changes
Jump to navigation
Jump to search
DCD Blogs/7 Things I Learned from Leading a Design Project (view source)
Revision as of 11:35, 19 June 2018
, 11:35, 19 June 2018Created page with "FR:DCN_Blogues/L'essai de l’icône <!--The following line of code hides the page title--> {{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); c..."
[[FR:DCN_Blogues/L'essai de l’icône]]
<!--The following line of code hides the page title-->
{{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
<br>
<div align="center">[[File:Blogs Banner EN.PNG|link=https://wiki.gccollab.ca/DCD_Blogs|center|2000x200px]]</div>
<br>
------
<br>
<div style="line-height: 3em; font-size: 250%; text-indent: 8%; font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;"> '''7 Things I Learned from Leading a Design Project'''</div>
<div style="line-height: 2em; font-size: 125%; text-indent: 14%;font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;"> [https://gccollab.ca/profile/Sduff Sierra Duffey] / Web Content Developer / June 20, 2018</div>
<div style="line-height: 2em; font-size: 125%; text-indent: 14%;font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;"> '''4 minute read'''</div>
<br>
<div style="border:1px solid #white; {{Round corners}}; text-indent: 8%; margin: 20px; margin: 0 auto; width: 700px; line-height: 2em; font-size:125%">
'''<span style='color:#545454; font-size:125%'>Last week at the Innovation Fair</span>''', the Digital Collaboration Division team invited guests to take part in an icon testing experiment. The Digital Collaboration Division (GCTools team) is working on a redesign to make the different tasks (i.e. blogs, the Wire, GCcollab, the Wiki, profile) into one centralized application suite, and we want to make sure we get it right! To create the best tools possible for users across government, private industry, and academia, we will be conducting usability tests regularly. This was the first step!
<br>
<br>
Redesigning a website is hard, and requires incredible attention to detail, which is why we need to test everything — even something as small as icons used on the site. Icon testing is done to make sure that when various icons are used on our webpages, users will understand what they mean, and what functions they might find if they click on the icon. This is important because users with different cultural and technological experiences may ascribe different meanings to different icons. This can cause trouble when attempting to convey a singular meaning through a simple image.
<br>
<br>
Alongside the development team, we decided to look at three categories of icons, and chose six icons for people to choose from: a gear, a wrench, a hamburger menu, a waffle menu, a bell, and a flag. We displayed icons commonly used to represent settings, application selection and notifications — three important functions in any app suite
</div>
<br>
[[File:Icon Testing Blog - Icons.png|center|936x186px]]
<br>
<div style="border:1px solid #white; {{Round corners}}; margin: 0 auto; line-height: 2em; width: 700px; font-size:125%">
We selected a gear or a wrench for '''settings''', a hamburger menu or a waffle menu for '''application selection''', and a bell or a flag for '''notifications'''.
<br>
<br>
When it came time to test the icons at the Innovation Fair, we were the girls struggling to carry an easel up and down Slater Street. While we unfortunately were not able to complete our icon testing using virtual reality — an asset many other departments were equipped with — we still managed to have 32 participants run our minute-long icon test!
<br>
<br>
While we had our own assumptions of how icons would be classified and which icons would be best, we were surprised by the diversity of responses! Of course, when gathering thoughts and opinions there were no wrong answers, but over time a clear trend emerged. When asked which icon best represented the category we named, it was found that users most often chose the Gear, used to represent Settings, the Waffle Menu for Application Selection and finally the Bell which was chosen to represent Notifications.
<br>
<br>
The results and feedback we got from this quick experiment are going to be combined with some of our other user testing research, and be put towards designing the new GCTools! Which icons would you have chosen for each category? Would you choose some icons for a desktop website and others for a mobile application?
</div>
<br>
<br>
<!--The following line of code hides the page title-->
{{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
<br>
<div align="center">[[File:Blogs Banner EN.PNG|link=https://wiki.gccollab.ca/DCD_Blogs|center|2000x200px]]</div>
<br>
------
<br>
<div style="line-height: 3em; font-size: 250%; text-indent: 8%; font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;"> '''7 Things I Learned from Leading a Design Project'''</div>
<div style="line-height: 2em; font-size: 125%; text-indent: 14%;font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;"> [https://gccollab.ca/profile/Sduff Sierra Duffey] / Web Content Developer / June 20, 2018</div>
<div style="line-height: 2em; font-size: 125%; text-indent: 14%;font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;"> '''4 minute read'''</div>
<br>
<div style="border:1px solid #white; {{Round corners}}; text-indent: 8%; margin: 20px; margin: 0 auto; width: 700px; line-height: 2em; font-size:125%">
'''<span style='color:#545454; font-size:125%'>Last week at the Innovation Fair</span>''', the Digital Collaboration Division team invited guests to take part in an icon testing experiment. The Digital Collaboration Division (GCTools team) is working on a redesign to make the different tasks (i.e. blogs, the Wire, GCcollab, the Wiki, profile) into one centralized application suite, and we want to make sure we get it right! To create the best tools possible for users across government, private industry, and academia, we will be conducting usability tests regularly. This was the first step!
<br>
<br>
Redesigning a website is hard, and requires incredible attention to detail, which is why we need to test everything — even something as small as icons used on the site. Icon testing is done to make sure that when various icons are used on our webpages, users will understand what they mean, and what functions they might find if they click on the icon. This is important because users with different cultural and technological experiences may ascribe different meanings to different icons. This can cause trouble when attempting to convey a singular meaning through a simple image.
<br>
<br>
Alongside the development team, we decided to look at three categories of icons, and chose six icons for people to choose from: a gear, a wrench, a hamburger menu, a waffle menu, a bell, and a flag. We displayed icons commonly used to represent settings, application selection and notifications — three important functions in any app suite
</div>
<br>
[[File:Icon Testing Blog - Icons.png|center|936x186px]]
<br>
<div style="border:1px solid #white; {{Round corners}}; margin: 0 auto; line-height: 2em; width: 700px; font-size:125%">
We selected a gear or a wrench for '''settings''', a hamburger menu or a waffle menu for '''application selection''', and a bell or a flag for '''notifications'''.
<br>
<br>
When it came time to test the icons at the Innovation Fair, we were the girls struggling to carry an easel up and down Slater Street. While we unfortunately were not able to complete our icon testing using virtual reality — an asset many other departments were equipped with — we still managed to have 32 participants run our minute-long icon test!
<br>
<br>
While we had our own assumptions of how icons would be classified and which icons would be best, we were surprised by the diversity of responses! Of course, when gathering thoughts and opinions there were no wrong answers, but over time a clear trend emerged. When asked which icon best represented the category we named, it was found that users most often chose the Gear, used to represent Settings, the Waffle Menu for Application Selection and finally the Bell which was chosen to represent Notifications.
<br>
<br>
The results and feedback we got from this quick experiment are going to be combined with some of our other user testing research, and be put towards designing the new GCTools! Which icons would you have chosen for each category? Would you choose some icons for a desktop website and others for a mobile application?
</div>
<br>
<br>
