Started a New Blog Called Designerly!

Very excited to announce my new blog, Designerly. The content will focus on design methods, process, inspiration, ideas, and industry problems.

The first article focuses on why UX Matters, high-level methods, and who is directly affected by UX deliverables.

Check It Out




If you have questions, comments, or content ideas — please share in the comments!

via Blogger http://ift.tt/2xLRkFr

Advertisements

Think Accessibility: Personalize Your Site to Send the Right Message to Visitors with 5 Easy Tips

57 Million Americans have a disability (Internet Accessibility, 2017), and 54% of American adults with a disability use the web 
(Pew Internet Project).

1. Great Design NEEDS Great Code

A great design can make users ooh and ahh, if they can access it. Check out Google Web Standards or W3schools.org for tips on how to write good clean code.

  • Use labels for input fields
  • Clearly mark all required fields and use a label that indicates what labels like images or an asterisk (*) represent
  • Use more than just icons, images, colors or symbols to identify ANYTHING – it is absolutely okay to use these assets, just be sure to also integrate alt attributes, descriptions, transcripts, and aria fields
  • Integrate title tags
  • Use unique and page-relevant meta data for each page (title, author, description, keywords)
  • Avoid inline javascript and styles
  • Test your page without CSS (does it still make sense)?
  • Captcha is not accessibility friendly
  • Bootstrap (at the time of this post’s publishing) is not accessibility friendly out-of-the-box
  • Do not replace form labels with placeholder text
  • Avoid using WYSIWYG editors if you know HTML/CSS. Editors in most CMS tools and Dreamweaver can add a lot of gunk to the code.

2. Accessibility May Require More than the 508 Basics

The Rehabilitation Act was enacted by U.S. Congress in 1973 with a section specifically identifying electronic devices, software, and best practices as an amendment called Section 508. The original section, similar to the current one (in my opinion), was mostly ineffective, overlooked, and overall under-promoted with basic rules and guidelines to provide developers and people creating electronics the information needed to provide people with disabilities a similar experience to those without. The EU and UK have similar laws and guidelines. There are also various web standards managed by various groups like Web Aim and W3C.

Section 508 was last updated in 1998, ten years before the first iPhone was released by Steve Jobs (January 2007). So, the laws and requirements required may be considered a little out of date or behind the technological times. That being said, there are many great resources available to teach the basics, and even the basics are often skipped. Skipping the basics hurts the end-user, and leaves many government agencies, schools, and organizations open to expensive law suits.

  • Skip Navigation allows people using assistive technology, like JAWS, to skip over the navigation section of a site. This is important because many disabled internet users with motor skill impediments only use keyboards to tab through a site (never using a mouse). Blind users may have sites read to them and it would take a long time to navigate if they have to listen to the entire navigation over and over.
  • Alt attributes are tags attached to images that describe the image, why it is relevant, and what it means in relation to the page. This text also appears if the image is missing from the file server. 
  • Title tags can be used to describe the anchor text of a link’s location and provide additional context so users do not have to navigate to the page.
  • Meta data is used to describe a page and is also used in the tab of a browser, search engine results, and can be used to propagate sitemaps.

3. Avoid Using Images for Text

Web fonts are easy to integrate and custom typography can now be used on the web via CSS. If you don’t want to host fonts, consider using Google’s free font library. Many designers choose to create print-ready designs and instead of splicing and optimizing images for the web, quickly integrate whole designs via free content management systems like WIX, WordPress, or Blogger.

Beautiful design CAN be accomplished in a responsive (mobile-friendly) way without hosting images as web pages. Plus multiple large images, animations, and designs with fonts inside the image are not readable by search engine bots (the evil little creatures who live inside the interwebs that are responsible for categorizing and managing the library that is search engines).

4. Color with Contrast

8.1 Million American’s are known to have a vision impairment, many with color blindness. If font colors look similar to the background behind the text, the content may become unreadable. There are many versions of color contrast checkers. Web Aim offers a free tool on their website, and WAVE is a Google Chrome add-on that allows web developers to quickly quality check sites for common accessibility issues.

5. Testing Takes Time

Know your user, and plan for more users you don’t know. User experience research can be fun! User interviews are just the start, but ongoing research using tools like Krux, Google Analytics, Adobe Analytics, Moz, CrazyEgg, and others can help developers and designers better understand who they are creating for. There are dozens of browsers available, hundreds of versions, and various devices that people may be using to access a web page or application. Analytics can help narrow down the requirements to a specific browser, various devices, versions, and what time of accessibility tools are CURRENTLY being used. A good tool and knowledgeable researcher can even discover which browsers have the highest exit rate (meaning you’re losing traffic and should optimize for those users).

Over time content can be customized based on demographics, keywords, web morphing, and the use of machine learning to give a dynamic (almost unique) experience to a large number of users.

  • Wahlbin, K.,  Bunge, K., Krause, G., Miller, M., Wahlbin, S. (Accessed May 2017). Interactive Accessibility. Accessibility Statistics. http://ift.tt/1Km7LsK
  • Dolson, J. (2009). Practical Ecommerce. Pew Internet Project. (Accessed May 2017) http://ift.tt/2qwBvzb

via Blogger http://ift.tt/2q11ZoS

Think Accessibility: Personalize Your Site to Send the Right Message to Visitors with 5 Easy Tips

57 Million Americans have a disability (Internet Accessibility, 2017), and 54% of American adults with a disability use the web 
(Pew Internet Project).

1. Great Design NEEDS Great Code

A great design can make users ooh and ahh, if they can access it. Check out Google Web Standards or W3schools.org for tips on how to write good clean code.

  • Use labels for input fields
  • Clearly mark all required fields and use a label that indicates what labels like images or an asterisk (*) represent
  • Use more than just icons, images, colors or symbols to identify ANYTHING – it is absolutely okay to use these assets, just be sure to also integrate alt attributes, descriptions, transcripts, and aria fields
  • Integrate title tags
  • Use unique and page-relevant meta data for each page (title, author, description, keywords)
  • Avoid inline javascript and styles
  • Test your page without CSS (does it still make sense)?
  • Captcha is not accessibility friendly
  • Bootstrap (at the time of this post’s publishing) is not accessibility friendly out-of-the-box
  • Do not replace form labels with placeholder text
  • Avoid using WYSIWYG editors if you know HTML/CSS. Editors in most CMS tools and Dreamweaver can add a lot of gunk to the code.

2. Accessibility May Require More than the 508 Basics

The Rehabilitation Act was enacted by U.S. Congress in 1973 with a section specifically identifying electronic devices, software, and best practices as an amendment called Section 508. The original section, similar to the current one (in my opinion), was mostly ineffective, overlooked, and overall under-promoted with basic rules and guidelines to provide developers and people creating electronics the information needed to provide people with disabilities a similar experience to those without. The EU and UK have similar laws and guidelines. There are also various web standards managed by various groups like Web Aim and W3C.

Section 508 was last updated in 1998, ten years before the first iPhone was released by Steve Jobs (January 2007). So, the laws and requirements required may be considered a little out of date or behind the technological times. That being said, there are many great resources available to teach the basics, and even the basics are often skipped. Skipping the basics hurts the end-user, and leaves many government agencies, schools, and organizations open to expensive law suits.

  • Skip Navigation allows people using assistive technology, like JAWS, to skip over the navigation section of a site. This is important because many disabled internet users with motor skill impediments only use keyboards to tab through a site (never using a mouse). Blind users may have sites read to them and it would take a long time to navigate if they have to listen to the entire navigation over and over.
  • Alt attributes are tags attached to images that describe the image, why it is relevant, and what it means in relation to the page. This text also appears if the image is missing from the file server. 
  • Title tags can be used to describe the anchor text of a link’s location and provide additional context so users do not have to navigate to the page.
  • Meta data is used to describe a page and is also used in the tab of a browser, search engine results, and can be used to propagate sitemaps.

3. Avoid Using Images for Text

Web fonts are easy to integrate and custom typography can now be used on the web via CSS. If you don’t want to host fonts, consider using Google’s free font library. Many designers choose to create print-ready designs and instead of splicing and optimizing images for the web, quickly integrate whole designs via free content management systems like WIX, WordPress, or Blogger.

Beautiful design CAN be accomplished in a responsive (mobile-friendly) way without hosting images as web pages. Plus multiple large images, animations, and designs with fonts inside the image are not readable by search engine bots (the evil little creatures who live inside the interwebs that are responsible for categorizing and managing the library that is search engines).

4. Color with Contrast

8.1 Million American’s are known to have a vision impairment, many with color blindness. If font colors look similar to the background behind the text, the content may become unreadable. There are many versions of color contrast checkers. Web Aim offers a free tool on their website, and WAVE is a Google Chrome add-on that allows web developers to quickly quality check sites for common accessibility issues.

5. Testing Takes Time

Know your user, and plan for more users you don’t know. User experience research can be fun! User interviews are just the start, but ongoing research using tools like Krux, Google Analytics, Adobe Analytics, Moz, CrazyEgg, and others can help developers and designers better understand who they are creating for. There are dozens of browsers available, hundreds of versions, and various devices that people may be using to access a web page or application. Analytics can help narrow down the requirements to a specific browser, various devices, versions, and what time of accessibility tools are CURRENTLY being used. A good tool and knowledgeable researcher can even discover which browsers have the highest exit rate (meaning you’re losing traffic and should optimize for those users).

Over time content can be customized based on demographics, keywords, web morphing, and the use of machine learning to give a dynamic (almost unique) experience to a large number of users.

  • Wahlbin, K.,  Bunge, K., Krause, G., Miller, M., Wahlbin, S. (Accessed May 2017). Interactive Accessibility. Accessibility Statistics. http://ift.tt/1Km7LsK
  • Dolson, J. (2009). Practical Ecommerce. Pew Internet Project. (Accessed May 2017) http://ift.tt/2qwBvzb

via Blogger http://ift.tt/2q11ZoS

Website: StyleForDignity.com

Style for Dignity is a website built for dig·ni·ty events and fundraisers. The goal of the group is to raise funds and/or awareness for social justice issues. A list of the charitable entities and goals are listed on the website.

I did the graphic design, event management, social media, and most of the vendor management for the first event. The event was hosted at Della Viti in downtown Des Moines and sold out in under a week. Attendance was low the first time, since the venue was small and the day-of the event we had bad weather. A list of sponsors, volunteers, and videos/photos from the event are available on the website.

via Blogger http://ift.tt/1Xmrxvl

Workiva Discussion

Workiva Discussion

I’ve added the details of this document to BlackBoard so that we can continue the discussion and collaborate as a class if anyone is interested.


Questions for discussion

These are my questions from the Week 4 Google Docs, in case they are not included in class maybe we can discuss them here?
  • How big is your UX/UI team?
  • Who do you consider your stakeholders and what kind of evaluation/testing do you do to ensure ongoing feedback?
  • Is the iteractive container (computer buttons that expand) part of an open source frame work- is that polymer (http://ift.tt/1SkGSts)?
  • What considerations have your team made for 508 compliance and Accessibility testing? (not including performance, I did see it’s SSAE 16 Type II compliant and looked at a couple of the case studies – http://ift.tt/1QfXQ6d)

Reviewing Workiva’s Website

    • I noticed that their primary site is missing key components of accessibility compliance and web standards. I scheduled a demo, but doubt I will be able to do it before Friday’s class. This may or may not reflect on the Workiva product line, but would be a consideration for me as a corporate client.
    • The site is responsive
    • The site is written on HTML5
    • Uses http://ogp.me/ Open Graph Protocol
    • I’m curious why they choose to use IE=Edge
    • The site appears to use a framework
    • They use Google Analytics on their main site, I wonder what kind of analytics they use for their products and how they integrate results.
    • Built on Drupal
    • Google Tag Manager Integration
    • Using Clicktale

Other Topics for Discussion

Since we are on the topic of empathy in relation to UX, I found this article the other day  (Seung Chan Lim, 2014). It’s a well written piece that starts off with a story that leads into scientific research and evaluation of empathy.

References

via Blogger http://ift.tt/1Um7ZnY