Ideas for Human Computer Interaction Study

mcc-logoI am taking ICS 464  at the University of Hawaii at Manoa. I need to come up with a project idea and I want to flip it and use it for my work. I want to be able to write up something that will benefit my employer.

There are a few things that I am interested in updating on our website. I am interested in creating ways to gauge if users are interested in certain parts of our website more than others.

I have looked into the Javascript Observer pattern that records mouse movements and can play them back on page. This is beneficial because you can actually play back a session.

Paid services that provide usability metrics

crazyEggFeaturesCrazyEgg.com

clicktaleFeatures

Clicktale.com

The best things that these services offer are:

  • Heatmaps – Display where users move their mouse to.
  • Scroll distance calculators –  Show how much of the page they have scrolled to.
  • Jump off points – Show where users get frustrated and leave your website.

I am also interested in how to make our interactive brochure of a website more compelling and interesting to listen to on a screen reader. I want to find out if tags are read out loud or not.

“Know thy users for they are not you.” – HCI Proverb

I want to curate the experience of parsing a page on a screen reader. I want to hear how it sounds on a screen reader. Then I want to see how I can update our website to make the content more inviting; and make the process of doing things on the website easier and less frustrating.

I would like to hire blind beta testers for the usability study.

I would also like to make a checklist for creating a good usability study.

I am currently using Google Analytics on our website. It’s easy enough to integrate into a website with the Google Analytics code. //TODO: Insert link to how to article on integrating google analytics into wordpress.

Potential Usability Targets

Workshop Registration

workshops

URL: http://manoa.hawaii.edu/careercenter/students/workshops/

Wants:

  • More compelling.
  • More engaging.
  • Less tedious.

Career Counsellor Registration

counselling

URL: http://manoa.hawaii.edu/careercenter/students/career-counseling/

Wants:

  • Portray current state of sign ups. What times are still available?
  • Suggest other options after sign up is successful: Sign up for a workshop, learn more about our programs and services, ask a question.
  • Less tedious.

Career Fair Registration

careerfair

URL: http://manoa.hawaii.edu/careercenter/students/career-counseling/

Wants:

  • More compelling.
  • More engaging.
  • Less tedious.

Search functionality

search

URL: http://manoa.hawaii.edu/careercenter/search/

Wants:

  • More compelling.
  • More engaging.
  • Less tedious.

Summary

I am meeting with Professor Suthers today to discuss this project. Once this meeting is finished I am hoping to have refined the area of interest for this project. I also would like to have a clear framework for how to get started.

Advertisements

Mockup Designs for ICS Lounge

I was tasked with mocking up the murals, policies, and logos in the room. First I’ll show you how the room would look. Then I’ll show you the artwork up close.

I made a conscious decision to keep all artwork away from the Apple TVs and the whiteboards. I believe that we should keep those spaces as clean and pure as possible. I believe that any artwork on that side of the room would be distracting. Before you scroll on, know that this is just my idea for the room, it will not hurt my feelings if we decide to do something different. My main goal is to get some kind of consensus on the room design so that we can go ahead and get it done in the next 2 weeks. Here we go!

Entrance

As you face the room, the policies document is posted on the door. The logo would be posted from the inside. It would be cut out to allow onlookers to look through the glass and through the logo to see what’s happening inside.

entrance

Alcove Wall

Behind the door is Conway’s “Life.” A large XKCD comic is posted on the wall outside alcove 1.

leftWall3

Alcove Wall continued

Entering the space and turning to your left, you would see an XKCD comic on the wall. The ICS logo features prominently on the far left wall.

leftWall

Left Wall

Another XKCD comic is posted on the wall past the huge ICS logo.

leftWall2

Right Wall

Moving to the right wall we would see another XKCD comic on the green column. And finally there would be a triptych of Linus Torvalds, Steve Jobs, and Bill Gates’s portraits above the whiteboard.

rightWall

PlayWithMagic.org Reflections on Milestone 4

homePageDesktop

Updates we completed for the final milestone of our open source application PlayWithMagic.org:

  • Improved authorization awareness of the application.
    • Updated authorization to prevent unauthorized users from editing or deleting routines or magicians.
    • Displayed navigation elements based on your logged-in state and whether you are the owner of an item or not.
  • Added the Set Notes feature
    • A Magician may input desired information about a Set, and then get an analysis of the Routines they’ve chosen for the Set.
  • Resolved the https issues to the best of our ability with Heroku.
  • Used FontAwesome icons for placeholder images in newly created Profiles, Routines, and Materials that do not have uploaded images.
  • Fixed image upload issue when deployed on Heroku.
  • Evolutions were not being applied in Heroku.
  • Cleaned up dead branches.

Download the Milestone-4 release of PlayWithMagic.org on Github.

Feedback on Milestone 3

The PWM team got feedback from our professor after we demoed Milestone 3. Our professor gave us the following feedback:

  • Probably not good for unlogged-in users to edit/delete all content. 
  • Maybe only allow “creator” of content to be able to delete it?
  • Implement first pass at Magic Checkstyle.

Plan of Attack for Milestone 4

  • Patrick noticed that I had not normalized the imageId field that defines the “one to one” relationship between the Magician’s profile image and the Image entity I had created in the code to allow the user to upload images. After looking into the problem I noticed that I had also neglected to establish the one to one relationship in the Routines and Materials imageIds as well. I added this bug as an issue on Github. I focused on updating the image upload code I had written.
  • Mark worked on implementing the Set Checker feature for our application.
  • And Patrick worked on finalizing the User Authentication issues we had encountered in our demo of Milestone 3.

Screen Shot 2015-05-09 at 1.10.08 PM

We met on Skype for a few hours and each worked on the issues that had been assigned to us. Our longest stretch of programming was around 3 hours. Here’s a screenshot I took while I was running the tests on the code.

Github Issues I fixed

Issue #189: Set up default images for Profile, Routines, and Materials:

Screen Shot 2015-05-13 at 3.27.49 PM

I created a new branch called fixImageUploads-1 off of the Milestone 3 branch and started updating Magician.java, Routine.java, and Material.java to note the “one to one” relationship between the entities. Once I had updated the java files, I spoke with Mark and learned that we had created a new branch called Milestone-4. The branch I had merged off of was out of date.

I abandoned the fixImageUploads-1 branch and created a new branch off of the Milestone-4 branch and redid my corrections.

Then I noticed that now I had 2 branches with the same name. I did an easy fix and created a new branch off of fixImageUploads-1 called fixImageUploads-2. Then I spoke with Patrick and gave him the name of the correct branch name and he merged it with the master branch.

Issue #209: Images are referred to by their ids instead of a database relation

Screen Shot 2015-05-13 at 1.26.32 PM

There was an issue with images not being associated with the correct Magician/Routine/Material. When we checked the edit and view pages for Magician, Routine, and Material, the pages were querying the database for images that were not there. We had added Magicians, Routines, and Materials to the in-memory database. Now when we were loading the view or edit pages, they were looking for images that had not been ported to the Postgres database.

I updated the code to check for the imageId associated with each Magician, Routine, and Material to validate the imageId. If the imageId was not a valid number the code did not attempt to load the image.

Issue #211: Image Uploads do not work on Heroku

Screen Shot 2015-05-13 at 3.27.53 PM

Another issue that came up with the addition of the image uploads was located when Mark and Patrick ran Mark’s Chromium tests on the codebase. I fixed this issue by removing all tests that referred to deleting Magicians, Routines, and Materials.

This was an easy fix that involved opening the code in IntelliJ and running a search all files operation with the keyboard shortcut Shift+Command+f. I searched for the keyword “delete” and commented all references to methods to delete the Magician, Routine, or Materials in the Postgres database.

We collectively decided to leave the delete code in to allow for future updates that will allow the site administrators to delete Magicians, Routines, and Materials in the future once the Site Admin accounts can be created.

Issue #223: Fails tests in Milestone-4

Screen Shot 2015-05-13 at 1.26.30 PM

Once I had removed all references to delete Magicians, Routines, and Materials in PWN, the tests started to fail. 5 out of 15 tests were failing. This was a good thing. This allowed me to dig into the Chromium tests that Mark had written to remove the test code that was testing against the Postgres database.

Once I had removed the tests that checked the delete functions the tests all passed. I confidently merged my changes into the Milestone-4 branch.

Created Set Notes wiki page

I created a wiki page for the Set Notes that explains how to use the feature on our site. In order to accomplish this I reviewed the Set Notes Design in the Developer Guide and updated it to show what was actually implemented in the code. I also took screenshots on desktop and mobile versions of the site and added them to the docs/images folder on the master branch of our code. I pushed the repo and linked the images in the Set Notes to the images in the code.

PlayWithMagic – Reflections on Milestone 3

homePageDesktop

PlayWithMagic.org fosters an online community around an online tool that allows amateur magicians to post renditions of well-known routines and get feedback from their peers as well as professionals.

PlayWithMagic.org also allows magicians to post their routines as sets. Once the set has been posted, PlayWithMagic.org will automatically process the saved set and suggest improvements to refine the set based on the venue, type of magic performed, and duration of the set.

PlayWithMagic.org also allows other magicians in the community to comment on the sets that magicians have created to suggest additions and refinements to the sets that have been created by amateur magicians on the website.

This PlayWithMagic.org milestone brings together Authentication, Tests, and Image Uploads. We are edging closer and closer to a project that can be distributed to other developers to update and refine our initial product.

  • The deployed instance can be found at https://www.playwithmagic.org (as of 5/5/2015 at 8:54pm we are working on a few issues with our last merge)
  • PlayWithMagic.org can be accessed on Github here.

Project management is the process and activity of planning, organizing, motivating, and controlling resources, procedures and protocols to achieve specific goals in scientific or daily problems.

The primary challenge of project management is to achieve all of the project goals and objectives while honoring the preconceived constraints. The primary constraints are scope, time, quality and budget. The secondary — and more ambitious — challenge is to optimize the allocation of necessary inputs and integrate them to meet pre-defined objectives.

– Wikipedia.org

The time constraint on this project was palpable. Our frequent meetings on Skype have, by far, been the best way the PlayWithMagic.org team has communicated. Being able to meet on Skype has really allowed us to keep the momentum going.

Here’s a video I put together of our tests running on PlayWithMagic.org:

I really would have liked to be able to code while we are all coding online but I found that I do my best coding when I have complete silence (or classical music).

Working with talented and driven developers is making me a better developer. Having standing weekly meetings has worked well. I never feel like we’re at a loss for which direction to go. When I have a question about the tools  we are using or the code that we are building I am confident that one of my collaborators will have an answer.

Having finally fixed the bug that didn’t attribute my commits, my commits are finally showing up in the Github graph so my contributions are noted.

In the final milestone I’d like to see our “secret sauce” (Set Style Checker) implemented and providing constructive feedback to our community of amateur magicians.

At this point I feel like we’ve built a beautiful building, but it’s empty inside. It’s got air conditioning, it’s locked down with round-the-clock security, and it has a fresh coat of paint. But we are still waiting for the tenants to move in and start building cool things, having cool experiences, making friends, networking, and stepping up their magical game.

A list of my programming deficiencies

This week I watched the 2015 Pycon conference keynote by Jacob Kaplan-Moss, director of security at Heroku and one of the core contributors to Django. He admitted on stage in front of a large audience that he was a mediocre programmer. Shocking. Cue the uncomfortable silence 6 minutes in.

I hadn’t planned to write this post when I saw the Pycon Keynote. What made me interested in posting this list of deficiencies was a video I watched today with world renowned chefs René Redzepi and Jiro Ono (Of “Jiro Dreams of Sushi” fame).

The discussion between René, a cooking padawan, and Jiro, a culinary jedi, made my ears tingle. And something clicked. René asks Jiro for advice and he gets plenty.

From that struggle you can be bold and improve. – Jiro Ono

With that in mind I decided to make a list of my deficiencies in Computer Science.

In no particular order they are:

  • Cryptography
  • C Pointers
  • Design Patterns
  • Artificial Intelligence
  • Discrete Mathematics
  • Functional Programming

This is my pursuit for life. What is the pathway to mastery? The trail is in front of me. The milestones are clear. The stepping stones, not so much. The time is not assured. The first step’s been identifying the potholes. The next step is finding goals.

How did you finally learn C pointers? What methods of learning computer science have worked best for you? How many times have you left computer science and come back?

Reflections on Model Design

crowsfoot_notationI am a visual learner. I have a difficult time taking in concepts and removing the qualities of the teaching from the lesson itself. I believe this comes from a focus on sound quality that I’ve been developing for over 20 years as a musician. The extra signals that sometimes come across when someone is explaining something to me causes me to focus on the wrong signals and to mangle the points in the argument or the lesson. I’ll have to ask for them to repeat themselves or close my eyes to visualize what they just said, shutting out all the extra signals.

When I work with code I have to write out the concepts. I learned a very interesting way of making problems more easy to solve or new concepts easier to digest. I write them out in this list form. Then I use indentation to visually cluster important concepts together. This has worked for me the past. However, during this week’s 2 WODs my indentation learning method did not serve me well.

The first WOD this week asked me to create an Entity Relationship model for a library. Here’s what the original specification looked like:

Screen Shot 2015-04-14 at 12.43.01 PM

And here’s what it looked like after I cut it up into sections and created my own indentations to show the relationship between the words with my method of indentation:

Hamilton Library, 
	students and faculty 
		take out books on loan. 
	student or faculty member 
		can be loaned up to five books at a time. 
	Several copies of the same book 
		exist for those in high demand. 
	Borrowers
		make reservations when all copies of a book are out on loan.

	Information to be stored includes: 
		to whom a book is loaned; 
		the date a book is loaned; 
		the ISBN number, 
		title
		author of a book
		the student or faculty member reserving a book
		date reserved.

The Library staff needs to be able to do the following:

    Check whether a book being returned has been reserved;
    Check which borrower has a particular book out on loan;
    Check which books are out on loan to a particular borrow;
    Check whether a copy of a particular title is loaned out or not.
    Check which reservation should receive the newly turned in book.
    The history of loans for a book.
    The history of reservations for a book.

I did the same indentation format for the second WOD. Here’s what it looked like originally:

Screen Shot 2015-04-14 at 12.47.32 PM

And here’s what I came up with once I had cut it up into visual sections:

Car rental domain model

A car rental company called RentAJunker 
	keeps a number of offices 
	variety of cities 
		locations within each city. 

Each location maintains a 
	number of cars and trucks. 

The car types include: 
	Economy, 
	Standard, and 
	Van. 

Truck types include 
	Box Trucks 
	Cargo Vans.

RentAJunker maintains a 
	list of all their customers. 

When a customer first rents a vehicle, 
	the company records the customer name, 
	address, 
	phone number. 

A customer is usually identified by their phone number.

A customer 
	can reserve a vehicle 
		for specific days, 
	can rent a vehicle, 
	or return the vehicle that she/he has rented. 

To make a reservation, a customer 
	provides the location, 
	the type of the vehicle 
	and the day and time 
		for which she/he would like to pick up 
		and return the vehicle. 

When a customer returns a vehicle 
	the clerk enters the date, 
	the time, 
	the odometer reading and 
	whether the gas tank is full.

WOD Results

ER Diagram for the library:

ERD Library-1

ER Diagram for the Car Rental Company:

ERD_CarRental-1

  • I finished the first WOD in 14 minutes 5 seconds.
  • I finished the second WOD in 18 minutes and 4 seconds on the first try.

Lessons Learned this week

Getting relationships by examining the relationships between unconnected entities is a big change in how I think about modeling with ERDs. For example the customer does not need to have a relationship with a specific vehicle. And the reservation does not have to be with a specific car because the relationship can be gleaned from the office’s relationship with the car. I will be watching out for hidden models such as the Copy entity in the first WOD and the need to model the VehicleType for the second WOD.

Now that I know that my indentation modeling scheme is not flawless. I will have to try new methods to learn concepts more quickly. If you have any suggestions on how you learn computer science material. Please contact me.