Grad School Statement of Intent

Hello readers! Today I came across my grad school statement of intent that I had to submit with my application to the UT iSchool in 2008. I updated it in 2012 when I added it as part of my academic portfolio.

In my cube at work, I have a very prominent sign with a motto by web designer Mark Wyner that reads ‘Visual-design integrity for people with modern devices and browsers, and information integrity for everyone else.’ As a web developer, I think what lies underneath the presentation layer is the most important part of any web page. While visual design is necessary and increases usability for many users of information, it cannot and should not supersede a solid informational foundation. I am a strong proponent of Web standards, semantic markup, and accessibility for all and I believe that studying and learning at the School of Information has allowed me to better understand the ideals of data organization for which I already have a passion, ultimately making me a better web creator.

I thrive on organization, naming conventions, and process, all of which have helped me in my career as a web developer.  I have been very interested in learning about structuring data to make it optimally usable by both humans and machines, independent of the delivery method.  I want to go beyond the page level, beyond markup, and begin to classify knowledge and make it accessible to all.  I want to create information hierarchies that are easily understood so that the data can be found and used anywhere it is needed. My interests have revolved particularly around information architecture and increasing accessibility for deaf users. Whenever possible, I have chosen to pursue research assignments that have furthered my knowledge in these areas.

Until recently, I struggled to put a name to this area of study that I see as crucial for me to become the kind of professional I want to be.  When I learned that programs existed for information architecture, I felt as if I had finally found my “tribe.”  For me, specializing in information architecture is all about consolidating the wide breadth of knowledge I have around web development into a single path. I am enjoying the beginnings of my journey down that path and focusing my learning on the organization of data, usability of that data, and hope to eventually help form standards and best practices for the field. Much of my coursework has provided a solid foundation in this field and allowed me to get closer to finding my niche in user interface design and the user’s experience with information retrieval.

Through my graduate studies, I have gained an improved understanding of how users interact with information as well as the systems storing that data and the programs allowing users access to it. Another area that interests me is human factors and thus far in my career, I have had few chances to talk with users to measure their success (or frustration) with websites. Eager to learn more about the human factors aspect when designing and developing systems, I took a course on usability. It gave me a chance to design and conduct my own usability study, allowing me to observe firsthand how people approach using a website. Through these observations, I was able to make well-informed suggestions for improvement based on empirical research, not just my gut feelings about how a site should be designed.

During my career, I have made huge, personal strides towards creating more usable websites. In early 2007 I read Jeffrey Zeldman’s book Designing with Web Standards and it changed my outlook on the building of websites, opening my eyes to a new way of looking at information access. It was the first tangible explanation I had seen for structuring the data of web pages separate from the presentation layer. His work introduced me to the pure CSS coding method and taught me the concept of “semantic markup” which informs my work today. His book also led me to start studying accessibility practices and striving to make information available to all visitors, regardless of browser, device, or disability. I believe earning a Master of Science in Information Studies will allow me to deepen this knowledge and understanding about what makes for good design, and that will benefit many people.

Using the tools I have acquired from studying information architecture at UT Austin, I want to move beyond being a “code-monkey,” plain and simple. I want to be at the genesis of projects, helping large organizations, such as government or academic institutions, determine the best courses of action for managing their data and creating user-friendly interfaces for retrieval of that data. I want to influence how organizations structure and maintain their information as well as influence the interface through usability testing and interviews. I want to get beyond just being the one who implements designs to being someone who helps create and define those designs with the user in mind.

I view an MSIS as a great beginning, one that will provided the tools and foundation that will truly create a jumping off point for me and my career. I not only learned how to organize information in more intuitive ways or how to better help users interact with information; I also gained new concepts and insights as a web professional. I know I have a lot to offer and I believe this degree will open amazing doors for me, providing the knowledge to create great designs that are usable, accessible, and have a solid base in information architecture.

Gold’s Gym Class Schedule

Another accessibility challenge! I like trying to use websites with just a keyboard, which rarely works. The Gold’s Gym class schedule page is no exception. It has so many elements that respond to clicks only that it’s basically useless to a keyboard. I’m going to address the three issues that make this page unusable.

  1. Week selector
  2. Day selector
  3. Class information details

screenshot of the class schedule page with multiple areas highlighted

These  examples suffer from the same issues:

  • Mark up that prevents keyboard focus
  • JavaScript that does not include key press functionality

The class schedule defaults to the current week and current day to display information. If you want to look at a different week’s schedule, you have to use the tiny forward and backward arrows next to the week dates.

screenshot showing arrows next to the week April 23, 2018 - April 29, 2018

While each arrow is marked up as <a>, it does not get keyboard focus because there is no href attribute.

<a class="display-table-cell text-left" ng-click="vm.changeWeek(-1)"> <i class="material-icons">chevron_left</i> </a>

I solved that issue by adding tabindex="0"

(That’s the recurring theme for this post!)

However, even though the arrows now gain keyboard focus, they do not respond to key presses. Looking at the code I noticed the ng-click attribute, searched to find that’s AngularJS syntax and found there are others such as ng-keypress. I tried using that via the Chrome inspector but it didn’t work. There’s probably more to it to support key presses.

Each day of the week has a similar issue. Let’s look at the code:

<div class="border border-thin" ng-click="vm.setSelectedDay(day)">...</div>

The days are not marked up as buttons or links so again, no keyboard focus and they use the ng-click attribute only. tabindex="0" to the rescue.

screenshot showing three boxes for days of the week Monday April 23, Tuesday April 24, and Wednesday April 25

The last major issue is accessing the details of a class. For a mouse user, clicking a class opens a modal window. (Once on the modal window, keyboard tabbing resumes on the parent page but that’s another issue.)

screenshot of a modal window with close button and class details

For keyboard users, at this point you’re skipped from the “All instructors” select box, passed all the class details, to a form at the bottom of the page.

The whole class details area is marked up as a table. For a mouse user, an entire table row is a hotspot, not just the word Details.

<tr ng-repeat="scheduledClass in vm.filteredSchedules" ng-click="vm.openClassModal(scheduledClass)" class="ng-scope">...</tr>

tabindex="0" to the rescue.

All of these could benefit from using the :focus pseudo class to emulate the hover states for better visibility of what’s in focus.

screenshot of a row from the classes table showing the first row highlighted and in focus

With just a few tweaks, this page would be far more accessible.

Course: Developing with Empathy

Today I finished another free web accessibility course. This one is from Google and hosted by Udacity: Developing with Empathy

I find it hard to explain to other developers about having empathy for all web users, not just those who resemble ourselves. Courses like this are a great place to point those who might not be convinced that accessibility is important, especially those of us who work on projects that have little to no legal accessibility requirements.

This course is designed around four concepts:

  1. Providing and managing focus of elements for keyboard and switch users
  2. Constructing pages with good semantics and understanding the accessibility tree in the DOM
  3. A basic look at ARIA features
  4. Putting these together with style

I enjoyed learning about ChromeVox which emulates using a screen reader. The controls take some learning but it’s a useful way to test some of the hidden features of accessibility like aria-required on a form field.

Another helpful accessibility tool from this course is the Accessibility Developer Tools available through Chrome. It lets you perform an accessibility audit on a page and provides tips for improvements.

Here’s an audit of this blog’s front page.

screen shot of the results from an accessibility audit of the Fishy UX front page showing a score of 95
Fishy UX accessibility audit