Monday, April 3, 2017

Week 6: CSC318 Reflection

When I was doing my course selection in July of last year I ended up only 4 courses in the winter term. Since I was going into second year, I didn't have many choices for a 3rd year course. I wanted to take CSC309 but I didn't have the prerequisite, so I enrolled in CSC318 as a backup. I read that it didn't have an exam so I thought it would be an easy course, but I didn't really care much about the material. I didn't think it would be very relevant to computer science and it would be like an art course.

Now, in the last week of this course, I can see how wrong I was. This has been one of my favourite courses at UofT so far. The material has been interesting and I had the chance to meet new people and work in a large project that lasted the whole semester. Even though there is a lot of writing, it's a lot less stressful than studying for tests and exams. The marking scheme gives me the feeling of a weekly progression where I'm slowly building up towards my final mark instead of most of it coming from a final exam.

Taking this course also made me realize how important a good user interface is. I looked back at some of my previous side projects and found so many things that could have been improved if I had the knowledge I have now. For current and future side projects, I'll definitely use the concepts we learned in class to make them them better. I might not have the time or resources to do research and get feedback, but knowing how to choose good fonts and use colour in an effective way will make them much more visually attractive.


Monday, March 6, 2017

Week 4: Path of Exile Legacy







Aside from Hearthstone, which I talked about in week 2, another game I play a lot is Path of Exile. Path of Exile is a free to play online Action RPG developed by Grinding Gear Games. Every three months, Path of Exile is updated with new content and a challenge league is introduced. Challenge leagues are a way to add diversity by allowing players start again with a fresh economy and a new set of rules. Most of the playerbase plays the game in this three month cycle. Player numbers are high in the beginning of a new league and drop off later on as most people have achieved their goals for that league.


Image result for path of exile logo

This weekend was the release of update 2.6 along with the Legacy Challenge League. Legacy League is meant to be a way to wrap up the 2.x series of updates in anticipation of the 3.0 update, which will change a lot of core game mechanics. Legacy League allows players to combine up to three rules from past challenge leagues by using a new type of item called a Leaguestone. While using a Leaguestone, players also have a chance to get items from previous versions of the game that are unobtainable through regular gameplay.


Image result for path of exile legacy

The challenge league was well received and player numbers were the highest they have ever been this weekend. A lot of players wanted to experience leagues they missed or relive their experiences from the past, and Legacy League is a great way to do that.

However, a lot of people have expressed their concerns about the Legacy League UI. When you open the Legacy tab you have 3 slots to put in Leaguestones. Under each slot there is a a bar that shows you how many uses you have left. That is not a very accurate way to measure your uses, so you have hover over each Leaguestone and to read the text to actually see. This could easily be fixed by having a number counter under the bar.
Legacy Tab
Another issue is the lack of feedback when a Leaguestone runs out of uses (They start with 1-8 uses). Players have to keep checking the Legacy tab to see how many uses they have left, and that interrupts gameplay. When you want to add a new Leaguestone, you have to search through your inventory to find the ones you want to add, and it's easy to forget to do it. A lot of players suggested a queue system where you place Leaguestones and they are activated when your current leaguestones run out. 

Some of these Leaguestones can be quite valuable, and they are automatically activated when you enter a new area. The problem with that is that there are NPC's in lower level areas that you might need to talk to, but you waste a charge by doing so. This forces players to use up their Leaguestones before talking to the NPC's. This could be fixed by allowing players to set a level floor for them to activate, so they can choose not to activate them when going to lower level areas.

In conclusion, playing in this update has been a lot of fun, but these inconveniences make the experience feel worse than it should be. A better UI would mean I get to spend less time checking if my Leaguestones are active and more time playing the game.

Bibliography:
https://www.pathofexile.com/forum/view-thread/1834597
http://pathofexile.gamepedia.com/Legacy_league


Monday, February 20, 2017

Week 3: Airbar

I was browsing Reddit a few weeks ago and I saw a post about the Airbar. It's made by a company called Neonode and they claim it can turn any laptop screen into a touchscreen. I don't have one but I found it interesting and potentially useful for anyone that prefers to use a touchscreen but doesn't have a laptop with one. The Airbar is not currently available in Canada but it costs $80 on amazon.com. The price is on the high end in terms of input devices but it is much cheaper than it can cost to upgrade to a laptop with a touchscreen (ex. Dell XPS 13 without a touchscreen is $300 than the Dell XPS 13 with a touchscreen).


The Airbar offers something that is not seen much on laptops. Modularity. Most laptops come as a complete package without much room for hardware modifications. This product is a way to add an external feature to the laptop that can be easily removed when not in use. It comes with magnets for easily attaching and detaching, and it only needs a USB port to function.


Unlike a regular touchscreen, the Airbar doesn't use resistive touch technology. Instead, it uses a light sensor to detect the distance from your finger to the sensor and calculate where it is positioned on the screen. As a result, you can use it with gloves or other objects, not just your fingers. 


The downside of a light sensor is the precision. It needs to be lined up correctly to work, and may not fit every laptop. The Airbar website also says it supports touch gestures. However, since the light sensor goes on the bottom of the screen, multi-touch gestures might not work very well. If you have two fingers on the screen (one on top of the other), it might not recognize it properly.

Even though this product might not be for everyone, I think that this technology can be very useful in the future. Touchscreens could be a lot thinner if they are just a regular screen with a light sensor on the bottom. TV screens could become touchscreens with something like this. There are a lot of possibilities, it's up to tech companies to find a good use for it.

Bibliography:
http://www.air.bar/
https://www.amazon.com/Neonode-Airbar-15-6-Display-touch/dp/B01N3MHMSF/
http://www.dell.com/ca/p/xps-13-9360-laptop/pd
https://www.youtube.com/watch?v=QR5r1EfvheI

Monday, February 6, 2017

Week 2: Hearthstone - User Interface and Experience Analysis

Hearthstone is a free to play collectible card game developed by Blizzard Entertainment. It was released on both desktop and mobile platforms in 2014, and quickly became one of the most popular card games in the world. By April 2016, the game already had over 50 million players, and it made almost $400M in yearly revenue.

I started playing Hearthstone during beta and have been playing since then. Games are fast so it's great when you don't have a lot of time like when waiting for a class to start. I can also play on my phone which makes my commute to school more bearable.

In this blog post, I'll be discussing my opinions on Hearthstone's user interface, what I like about it, and what I think can be improved.


Good

Menus
Navigating the menu's in Hearthstone feels great. All the options are very clear, the buttons are big enough to easily hit and hovering over them shows a short description of what it does. When you click on them, there is an animated transition between menus that makes the game feel very polished.

Main Menu

Opening Packs
Blizzard nailed the pack opening experience. When you click on a pack it plays a different animation depending on the type of pack that shows the cards bursting out. The cards are then shown face down to the player, and hovering over them reveals their rarity. When clicked on, they are turned around, an announcer voice tell your their rarity. Overall it feels very satisfying and I'm sure this experience contributed a lot to getting players to spend so much money on the game.
Pack Opening

Collection
People like to joke about it but Blizzard did a great job making it feel like a physical card collection. It's like a card binder, where you can flip through the pages to see your cards. But you can also do things you can't with a physical card binder, such as search for cards and sort by rarity. Instead of foil cards like most physical card games, Hearthstone has gold cards. Gold cards have animated art, which have that premium look of a foil card but in a digital platform. With the collection screen, Blizzard was able to make people feel attached to their virtual cards so they would keep coming back to the game.

Collection Screen

The Bad

Deck slots
Initially players were only able to have 9 decks at a time. This caused a lot of controversy because players wanted to experiment with more decks but felt limited by bad UI. The developer's response was that more deck slots is confusing for new players and finding an elegant solution was very challenging. Eventually, 9 more deck slots were added, and their elegant solution was a simple scroll bar. This was a very lazy implementation that only fixed the problem temporarily. More game modes and cards were added, and it was only a matter of time until 18 deck slots were not enough.

To make matters worse, there is no easy way to import decks into the client. You can't save your old decks in case you feel like playing them again in the future. Eventually, community tools were created improve the player experience. Innkeeper is an example of a tool that keep track of your collection and lets find decks online to export to your game.

Inkeeper
Stats Tracking
The only stats available in the game client are your rank, your number of wins (total and with each class) and your level with each class. That's not enough for a game with a competitive scene. Important stats such as win rate and average game time are missing. Being able to see how your deck does against other popular decks is very useful information for deck builders. The only way to do this at the moment is through third party tools like Hearthstone Deck Tracker.

In-game stats
Conclusion
The UI/UX designers did an amazing job in a lot of ways. If it wasn't for the simple and easy to use, I doubt the game would have gained this much popularity. Compared to other online card games such as Shadowverse and Magic the Gathering Online, Hearthstone's game client is a lot easier to use. However, Hearthstone is not perfect. There is a lot of room to improve and features that the community has been asking for years have been ignored. 


Week 1: 4chan - User Interface and Experience Analysis

Internet forums have been around for a long time, but it wasn't until the early 2000s that image boards started to become popular. An image board is a type of forum where the text posts are usually accompanied by an image file, which is usually related to the text. One of the most popular image boards, 4chan, launched in 2003 and is still very relevant today.

Although a lot of new features were added throughout these 14 years, the website's user interface remained mostly the same. For today's standards it looks very dated, but the visuals come down to personal opinion, some people might like the old school look. The problem with the user interface is the usability. Without messing with the settings and using browser extensions to improve the UI, it can be difficult to navigate the website.
A screenshot of 4chan's technology board /g/
Images are a very important part of 4chan, but they can't be resized. They are shown as a thumbnail that expanded to full size when clicked on. This is a problem for large images because as a thumbnail they are hard to read, but if you expand them they take up most of the screen.

Posts are ordered in chronological order, and since users are anonymous, all posts are identified by a unique number. While you can see a reply by hovering over the number of the reply (top right corner), you can't see any replies to the reply unless you click on it. And instead of showing the reply when you click on the number, the website will automatically scroll to the reply. This is not intuitive because you have to go back afterwards if you want to read anything you scrolled past. Lastly, unlike other forums such as reddit, on 4chan you can reply to multiple posts within the same post). For this reason, it's sometimes hard to tell which post the reply is for. 

These may not be an issue for someone who is used to it, but I'm sure new users will struggle until they learn how. New users may also find it difficult to discover boards. Below is the header with links to all 4chan boards. Someone that hasn't used 4chan before probably wouldn't know what these letters stand for. An example is "b", which is the "Random" board. The letter "b" is unrelated to the word "Random". Someone that doesn't know might accidentally end up in a board that contains very not safe for work content (some boards have almost no rules).
Header board selection
Thankfully, there are ways around these problems. There are lots of browser extensions such as 4chanX that make 4chan more user friendly. Mobile apps like Clover also have major improvements over the desktop version.