In the School of Design at a college where I teach, once every two years we offer a "special topics" course in web design. I was discussing this UX Adobe ProGen class with the department head, and he thinks this would make a great topic around which to center a special topics course. I hope I can learn as much as possible so that I can teach my students how to make the most user friendly web sites possible!
Feb. 23, 2017 Assignment One
My son has a BM in viola performance and a dual MM in viola performance and music cognition. He is currently a violin/viola teacher and has done some performing and recording. He is currently applying to PhD programs in cognitive science with a goal of studying auditory perception. He has a web site that needs to wear many hats. He has many categories of visitors:
- Family members who want to see his videos and photo galleries
- Friends who might be interested in either his music or scientific pursuits
- Fellow musicians who might invite him to audition for gigs
- Music booking agents who might hire him to play gigs
- POI (professors of interest) who are looking for potential students for their cognitive science labs
The site has to serve many functions, and do so without allowing one area of expertise to scare off visitors looking for another. It is a balancing act, and the development of personas will help him determine the best way to organize the pages and features of his site.
March 7, 2017 Assignment Two
I have been building web sites since 1995, but the process of categorizing and creating a site map taught me a number of very important lessons:
- There is no such thing as a simple web site
- The content on a site is often more complex than initially thought
- Different “personas” have very different viewpoints on what is important
- A difference in what is important can lead to a difficulty in minimizing the number of clicks required for a task.
Our son is only 25 and has recently graduated with dual master’s degrees in viola performance and music cognition. Because of his young age and relative lack of work experience, I didn’t expect his web site to present any dilemmas or difficulties in its organization. Nothing could be further from the truth.
The Three Categorizers
- Family: his sister
- Professor: his father (as we couldn’t get a professor, we chose his father as he has a JD and is familiar with doctoral degrees and dealing with professors
- Student: one of my son’s violin students
- The family member could not care less about his academic record or papers and didn’t care at all if there was one resume or both resumes appeared on the opening portal page. She just went for the categories she cared about – video, images, events – and ignored the rest.
- The professor saw things differently. He was curious about why a person who went to a prestigious conservatory and who had recordings and radio appears to his name was switching to scientific research. He wanted to see a complete separation with two different portals so that the music stuff was pretty much out of the professor’s mind.
- The student: the student was confused by the cog science stuff. As a young person, she couldn’t grasp her music teacher having other serious pursuits. She didn’t know what to do with the papers, CV, and cog science portal.
It became clear that the way to organize the site was to have a relatively neutral entry page with two different portals: one for music and one for cog science.
March 24, 2017: Assignment Three
I created a paper wireframe of a site with dual portals. There is an entry page that has three buttons: one for a music portal, one for a cog science portal, and a contact button. When I did the usability testing, the tester had several issues. First, when he went to either the music or science cog portals, if he clicked on the home icon it took him back to the entry page rather than individual portal pages. He wanted to see both a general home button that took him to the entry, as well as home buttons for each of the portals. He also was not satisfied with a contact button on just the home page, but wanted to be able to contact the site owner from either the music or science portals. Finally, once on the science portal, he wanted to see the papers sorted into categories, such as music cognition and visual cognition.
I will be using this exercise in my web 1 class this semester, as well as a UX design topics class we will offer in the fall. I think that the exercise of doing a usability testing is good not only for learning about making a site easier to use, but also for team building among the students.
When conducting a test, one realizes that what seems intuitive to you as the designer is not necessarily what is intuitive for the user. In retrospect, my user made some observations that should have been obvious to me. My tester was pressed for time and I couldn't go through the entire paper prototype with him, but I think I can extrapolate some other useful changes from the issues he brought up in our short test.
March 25, 2017 Assignment Four
This was a fun assignment! It was a lot of playing around with color and design. Here is my mood board, which as you can probably tell, reflects an air of seriousness and lofty pursuits! It has a combination of music and science images, all in darker colors.
The next image is of my style tile. The adjectives duplicate the tone of the mood board: sophisticated, serious, somber, classical, cerebral, and cognitive.
Finally, here is the entry page. It is a more detailed and colorful version of the wireframe. There is a slider placeholder and buttons to enter the music portal or the science cog portal. There is also a contact button,
I believe that these pieces - the mood board, the style tile, and a screen of a page - will really expedite the process of putting together the click-through prototype. The scene has been set, and now all I have to do is gather the assets together and place them on the appropriate pages. I did not find the process difficult, though it was time consuming. However, it is absorbing work, and the time passed very quickly.
April 6, 2017 Assignment Five
I created my Prototype in Fireworks. I used the Pages, Symbols, and native prototyping tools that this application does so well. Too bad Adobe doesn't want to continue to develop it! I spent years learning and using it, and it is a really great little program. It is quick and lean and does web work well. Oh, well.
I did want to use XD and learn that, but life got in the way. A professor at my college went on sick leave and I had to pick up one of her classes mid semester, and my mother-in-law went into the hospital. I am lucky to finish this class at all! I plan to take the class again so that I can do all the assignments with XD next time around.
I used Jing to record my user clicking through the prototype from my desktop. Jing creates a SWF file, and I tried to convert it to a mov so that I could upload it to Vimeo. I had no luck! If you download the swf file and open it in Flash Player you will be able to view it. Or, you can watch it at screencast.com: https://www.screencast.com/t/ifWoI30mG88L
Here is the first screen of my prototype. You can download the entire click-through prototype from my entry on EdEx.
The most difficult thing about this process is fighting all the technology. There are just too many options, and sometimes I feel like I am spending more time wading through how to use a program than actually engaging in the act of creation.
April 7, 2017 Final Reflection
This was a great course! I will definitely use what I learned in my classroom. We are even talking about offering a UX class as one of our "special topics" courses in the Interactive Design program,
At first I wasn't too keen about the idea of a Spark Learning Journal. I found it initially confusing to use, and I wish there was a little more control in presentation. However, I came to see the value of having the reflections and assignments for all classes in one place. We usually use WordPress for students' learning blogs, but I am definitely contemplating using Spark next semester. There is a lot less involved in setting up and using it, and the students can focus on their content rather than the technology.
I loved the live classes. I found them to be the best way to interact with other students and to achieve the sense that this was a class in real time rather than a workshop you do at your own pace. I attended the London classes, and the instructors were always entertaining and warm and welcoming,
Because a couple of "life happens" events took place during this course (I had to take over a class for an instructor who went on medical leave, and my mother-in-law went into the hospital), I didn't get to use XD as much as I hoped. I played around with it a bit, but ended up reverting to Fireworks for some of the assignments because I know it well, and it has a lot of features. I plan to take the class again when it returns, and then I will take more advantages of XD. I bet it will have evolved more at that point, and will be a joy to use.