GSoC Week 9: Rethinking the UX

This post is part of my Google Summer of Code (GSoC) series to develop a "Pathway Presenter" for WikiPathways. You can find other posts in the series here.

Last week, I was on holiday, hence the skipping of week 8. This week, I have been working on getting the UX to be more intuitive as well as trying to get end-to-end tests with BrowserStack Automate.

Two weeks ago, I was asked by my mentors to take steps to make the UX more self-explanatory. The new requirements were:

  • Choose from a palette of styles (e.g., colours and hide)
  • Choose node to “paint” with style
  • Allow manual zoom and pan
  • Click ‘done’ to store frame as viewed

I certainly like the third point. With this method, instead of choosing which nodes you would like to be panned/zoomed to, you simply position the diagram how you like and "lock" it into place. However, the first two points seem a bit counter-intuitive to me so are up for discussion. To me, if I see a style palette and a paint too, I should be able to paint/erase anything, not just the nodes. That UI is much more like Microsoft paint so I don't think it's appropriate here. However, eventually, that kind of UI might be useful if Pathway Presenter is extended with the ability to add text boxes/highlight anything/erase anything. For now, though, that is beyond the scope of what I can do in this project.

So, the new UI is up and running and you can test it out at Below is a GIF of what it looks like.

New Pathway Presenter UX

End to End Tests

I have spent a good part of this week trying (and failing) to get end-to-end tests working. We have an account with BrowserStack so I was asked to create some unit tests for testing the cross browser capabilities of Pathway Presenter. I am keen to do this since I have very little experience with end to end testing. However, it is HARD. I have spent hours trying to get the Pathway Presenter working with BrowserStack but to no avail.

For those that don't know, end-to-end tests allow you to programmatically verify that your UI behaves the way you want it to. Using a tool like Selenium you can automate user actions in your app. For example, I can program that a (virtual) user clicks on the add slide button and then verify that a new slide has been added. BrowserStack allows you to do this in their cloud, across as many different browsers and versions as you wish - handy.

Writing the actual tests for this doesn't actually seem all too difficult, I just can't figure out how to run my code locally on BrowserStack. I could easily test deployed code but I want to run all of my tests and deploy the code if the tests pass. Once I've figured out how to do this I will write a blog post detailing exactly how it's done because documentation for this seems to be poor.

If anyone has done this before then please comment and help me :)

Help guides / Onboarding

I figured it's probably a good idea to create walkthroughs and help guides for using the Pathway Presenter. I have been working on a user onboarding system that (for now) relies on cookies to check whether the user is a first user or not. More on this next week.

Jacob Windsor

Likes creative computer-based stuff. Web, Science, Typography, Graphics... Trying to combine too many interests into something coherent.

Maastricht, Netherlands