Class Feedback

Today in class, we all had another sharing lesson, where we would go around and experiment with everyone's interfaces and give them feedback, in turn receiving some valuable feedback of our own. I decided to stay and get the feedback, since I had done most of the preparation of this prototyped interface, while Alfred went around to critique other apps. I have attached an image with our feedback below.

In the above image, is the notes that I took based on our feedback from the class, as well as Stu. The majority of the feedback was positive, with every single user saying that they found it easy to navigate, and it was simple where they had to go to reach the final outcome. A few sad that it was really logical, that they liked the colour scheme, and that it was looking really nice and refined. One of the key aspects seemed to be the ease of user interaction and navigation, as well as the design aesthetics and flow. Earlier in the lesson Stu had spoken about making sure the interface has a consistent feel in the colours, layout etc, and I felt like ours was very successful and effective in each of these. Stu's feedback, which is overall the most important feedback to acknowledge due to his experience with user interaction design, was very helpful. He did say that it was easy to navigate and use, and that he liked the consistency in the layout. There were a few suggestions, such as the "indoors" icon since it is so similar to the icon which is so often used for a "home" button. His other idea, since proximity of destinations is such a key factor within our interface idea, was to include this a lot earlier in the interaction stage. I have included a photo of his rough sketches of what to do below. Basically, he wanted it to go from the search screen, to allow location, to the 'casual, active, family' screen, then to the 'food, drink, entertainment', and then to another screen which shows their relative proximity to the user. It could be created in such a way that we can continue the use of our circle theme, and use these to show the distance each destination is in relation to the user. 

Our final hand-in presentation has been postponed to Week 7, the first week back from the holidays, since our next class would have fallen on Easter Friday, a public holiday. However, Alfred and I will make sure that we meet up regularly in order to keep discussing the development of our design, so we can continue to refine our interface until the final presentation. I will keep this blog updated with our progress.

Preparing an Invision Prototype

After meeting up yesterday, Alfred still had quite a bit of work to do for his VCD studio class, and since I had already finished my VCD work, I decided that I would take charge of this and continue to work on the app design. So I spent a few hours finishing the screens on Photoshop, planning out what our activity suggestions were, and then finally created an InVision prototype.The link to this prototype can be found here: http://invis.io/NW2JG4S7Z 

The above screens show pretty much all of the screens, most of which I individually created in Photoshop today while Alfred was catching up with VCD. I felt like there was quite a nice, consistent flow in terms of colour, along with the general layout, since we followed a set template. I feel that individually, it appears quite easy to navigate around, as we have given the user limited options to choose from, which quickly filter down their options to a few suggested destinations.

In the photo directly above, I have attached a screenshot from inside of InVision. This was once I was working out all of the hotspots for each screen, and begining to link them all together. Below, I have shown the screen that follows the one above. So once the user clicks on an activity, it has a page with a photo, the name, and some general information or background about that destination. Right at the bottom, within easy reach of the users thumb, is the "Go To Map" button, which will link them through to Google Maps, allowing the user to then find directions to get to their intended destination. I only made one of the paths lead all the way to the final suggestions, while all of the other links lead to the second to last page. The path to follow to get here is Entertainment - Indoor - Casual. 

 Below, I have attached a photo of part of my physical workbook, where I planned out all of the different options that the user could follow, and worked out suitable destinations in accordance. That way, if we decided to make the app completely, we would have a list of places to include in the final suggestions.

Research of Existing Apps

Today, towards the end of the class, we were given some time to go through and look at some existing apps, as well as download a few to try them out, and see exactly what was good and bad with their interfaces, so we could both gather some effective ideas, and also know what sorts of interface designs to avoid. A few that we looked at online have been attached to this blog post below.

Most of them, although being quite easy to navigate, just started off with a whole set of categories to choose from, rather than just using a couple to narrow down the options. The second one down, "Here U Go" is one that Alfred and I downloaded, and it was extremely poorly designed. Not only does it look bad aesthetically, it's also not very well designed in terms of layout. As you can see in the screenshot below, it shows the large, large list of categories that there are available. To make things worse, it has been placed in alphabetical order. By doing this, it makes it extremely difficult to navigate, as some things might be called something else and put under a different letter. For example, you might be looking for "Mechanics", when it has been placed under "A" for "Auto Repair", which leaves it relatively far away from where you were looking.

Another one that we analysed, although was downloaded on Alfred's phone (as he switched his iTunes account to U.S to download), so I don't have any screenshots of it, was an app which allows the user to choose their activity based on how they were feeling. There were a few different options such as "lively", "classy", and "whatever". Once you clicked on how you were feeling, it generated a list of all sorts of places and activities that applied to how you were feeling when searching. We felt that an idea similar to this would be quite handy to use or develop when we come to developing our own interface.

Most of the screenshots below are from android apps, although each of them show that there is no real point where they begin with only a couple of options, all of them seem to have heaps of choices to make right at the beginning. We are going to make sure that we begin with only a limited number of choices at the beginning of our app in order to try and make it more successful than all of these ones below. Another aspect of the below apps are that they take quite a few steps to get to the end result, so we will also try and make it so our app can go from start to finish in between 3 and 5 interactions if possible.

Right at the end of the class, we began sketching a few more ideas on how we could layout our interface, and had another small discussion with Stu on our newer ideas. He gave some more feedback on how to develop and simplify these even further, so we will definitely take these into strong consideration when creating our next InVision prototype. By next week, we have been asked to create another InVision prototype, although this time it is to be created digitally rather than drawn and transferred onto the computer.

Below is the page of our sketches with some ideas for certain screens in our new layout.

Feedback on Prototype

Today in class we had our class feedback session to go over our apps. It was strange seeing how different it is for people to navigate the app if they have never used it before. Pretty much the main piece of feedback was to simply the app, so there aren't so many things on the screen at any one time. That way it will be more obvious to the user as to what they should press. I could probably get rid of the saved, and planned features altogether, although if I keep them, I'll definitely combine them into just one, as they practically serve the same purpose and was a bit confusing.

On the home screen, possibly have the question straight away of "What do you want to do?", so that the user is immediately taken to where they need to be, making their interaction a lot easier. The loading page could have the logo come up, and then once it has loaded have the "What do you want to do?" appear. From there, I will make sure each page only has a certain amount of options for the users to choose from.

Stu suggested that the aim is so make the app have the least number of interactions as possible, so that there is no struggle in the user getting to the final interaction, as you don't want them getting confused or lost along the way. He also told us how the interface should almost be like a cone, so at the very beginning of the app, in the first few interactions, there should only be a couple of options that the user must choose from to avoid confusion, and then as the interactions continue you can have the freedom to expand slightly more.

A few people commented saying that my layout of my prototype was quite good, yet I realised that the fact that we hadn't confirmed all of the categories, made it a lot harder for them to navigate, as they didn't know what was going to be in place of each of the icons.

However, now that Alfred and I had designed them separately, it allows us to take the best aspects from each, and combine them, as well as continue to develop these further in time for hand-in. I will keep my blog updated with how the development is going, and will continue to show what stages of the design process we are up to. I am looking forward to getting into designing the actual aesthetics of the interface as well, as we will be able to use the digital advantages to improve user interaction. For example, we can then make the buttons look like they are actually buttons with bevels or shadows etc.

Independent Group Work

Today, Alfred and I met in the library to get some work done by Friday's class. Initially, we sat down and started to clarify what exactly we were going to do in terms of getting the user from the beginning to the end as easily as possible. Once we had this sorted, we began to work on a few screens on Adobe Photoshop, that we would eventually insert into InVision. We made sure to set up a template that we would follow for each screen, as well as a set colour palette to follow throughout the entire app prototype. We got a few screens up and running, although I will work on the rest tomorrow and whip up an InVision prototype.

InVision Protoype - Drawings

Today I got to experiment with the program InVision that we were introduced to. I was really excited to get into using this program, as I saw how easy it made app design, and I was excited about the fact that we could actually make our own functioning app via this software. So I ended up drawing up each of the pages for my interface, so that I could take photos of these and then insert them into InVision via their Drag and Drop feature.
Alfred and I decided to create one InVision prototype each, so that way we have two different layouts and concepts that we can use as inspiration. By doing this, it will also allow us to see each others ideas on how to create this interface, and then take the best ideas or aspects from each, and use these when it comes to the development of our interface.
Below are photos of the drawings that were in my physical workbook. For the InVision prototype, I took photos of each drawing individually so that I could have one per screen, and then create the links between each page. 

So once I had drawn up each interface, I decided to create an account on InVision and give it a go. I quickly watched the two recommended videos on the basics of InVision. Once I got into making my own, I realised just how easy it really is to use, and to create your own fully functioning interface. I also noticed a lot of cool features that we could add when we get into making our proper prototype, rather than just this paper prototype.

I'm really happy with how this initial drawn prototype turned out, and I'm looking forward to developing it and seeing just how far we can develop this idea into a final output.

Here is the link to access my drawn InVision prototype...

http://invis.io/H92HA3PFB

Class Work

In class today, we went around the class and each group of 2 discussed their 3 ideas that they had come up with for a potential interface design. Out of our three, Stu preferred the ones that experimented more with the use of geo-location on smart phones, and thought that this would give us more freedom to expand and experiment on.

Alfred and I thought that experimenting with geo-location would be new and exciting, so we ended up deciding to go with our 'Wellington Activity Planner', which gives the users all the information required to find all sorts of cool places to go, and activities to do in the Wellington region. In class, we were asked to come up with a list of interactions that are required to get the user to the end result. Our interface will be for smart phones, which allows us to find the users location. Our initial ideas for this were as follows...

1 - Unlock phone
2 - Click to open the app
3 - User will be asked to allow access to their location (first time only)
4 - Pick a category (e.g: walks, shops, food, live events)
5 - Choose basic or advanced search (advanced takes user to a set of questions which allows them to narrow down their options based on a series of factors)
6 - User will receive a list of recommended places or activities
7 - Choose place or activity
8 - User will be given information and pinpointed on Google Maps

We also discussed the possibility of a few other features...

"Save" - This would be an option that appears once the journey has been planned, and gives the user the chance to access this journey at a later date without needing to repeat the process of answering questions and re-finding their event or activity. The saved section would appear when the app opens, alongside a "New" button.

"Add" - We thought that when the list of activities come up, we could add a little plus button which allows the user to add the journey to a 'to do list' or 'favourites' section. This would allow them to then go to the 'Planned' section at the very start and see which events they had previously planned on doing.

We started drawing up a few ideas of how the interface and layout could look, and we both felt that this interface idea would develop very nicely, and we both continued to think of extra ideas to develop the app.

By next week, we were asked to draw up some layout ideas in a sequential order, and then go onto the 'In Vision' site that we were introduced to at the end of class. Stu asked us to have a mock-up interface made on there by next class.

'Gruesome Fish' - And Brainstorms

Alfred and I decided to call our group "Gruesome Fish", as this was one of the names that appeared in a random name generator we found on Google. We were asked to come up with a couple of ideas for our interface design. A couple of our ideas are as follows...

1 - Football Coaching App: Having been an employed coach for over a year, there was always a bit of time that you needed to spend before each training planning the training with exactly what drills you will do, how long they will be for, what equipment is needed, and then also what the intended learning outcomes are. This was always done by either writing it down on computer, or creating a template on photoshop and filling it out on there.

We had the idea that we could create an App for phones or tablets, which allows coaches to plan their training on there phone via simple drag and drop functions. There was a possibility to have different categories for drills, such as passing, shooting, movement etc, and then even further narrow them down into other factors such as players needed per drill, equipment needed, and also the difficulty level of each. For game days, when it came to choosing your squad, we were also thinking of having a extra section to cater for this, so you can simply drag and drop players and move them between the field and the bench, or even into the reserves squad. These were just our initial ideas, and we will look to further expand on these as we go to narrow down to one idea.

2 - Wellington Activity Planner: Having realised exactly how much there is to do in Wellington, and realising how little people know about all of these activities made me realise that this would be a very good interface to pursue.

We were planning on using this interface in order to let users plan out what activities they would like to do in Wellington. Initial ideas consisted of getting the user to select a certain icon on a home screen, each icon representing a different category, such as food, shopping, sports, entertainment, and so on. From there, we thought that it would be neat to have a section that allows the user to type in some more answers to narrow down the options that appear, such as price they're willing to pay, how long they have to do the activity, and also what means of transport they have available. Once the list appears, after inputting some details, the user can choose an activity, and find out all the details about the place, while also being directed to a page with Google Maps embedded.

3 - Live Venue Finder: For this idea, we realised that many people are unaware of just how many live events, shows and concerts are on offer in Wellington, so we decided to brainstorm this as an idea for our interface design.

What we were looking at, was an app that uses the users location to find out where exactly they are, and give them updates on events or shows that are close to them, and what times they are on, who is performing, as well as the prices of each. We were thinking of doing it just for Wellington, although it would be better in terms of expanding our target audience if we did it for all of New Zealand. This wouldn't be too much harder, as it would still be using the location finder on smart phones to find the users location, and then give them details and information accordingly.

Paper Prototyping

Today in class we had our presentation of our case studies, which involved choosing one good interface, and one interface that we found bad, or not quite as user friendly. The two that I presented were News Now (good) and Sky GO (bad). 

After the hour and a half of presentations, we went off individually and did a bit of paper prototyping with the bad interface that we had selected. So I was required to draw up some paper prototypes for the Sky GO wesbite. Tim asked me to draw up the process that you would have to go through to "see what was on Cartoon Network at 4pm tomorrow (Saturday)". So I quickly drew up a couple of pages in a prototype fashion, showing the main labels and layout, and identifying where the user would have to click in order to get there. This was to see if there were any issues in terms of needing to click in a whole bunch of different areas to get to the channel listings. The paper prototypes can be seen below.

In the first photo, it shows the two points in which you can click, to get to the page which shows the tv guide.

In the second photo, it shows where you need to click (10 times in fact) until you find Cartoon Network. You could also click the "left arrow" once, although users tend to click on the right arrow first, and they would be unaware that Cartoon Network is in fact on the left hand side of BBC.

In this last photo, I have circled the section in which it tells you the time, although as indicated, once you come to this page you need to scroll down to find the time, as it has listings for the full 24 hours.

Along with this, we were then asked to decide how we would make this task slightly easier. My idea would be to introduce a sliding bar into the section where you choose which channel you would like to watch. This would allow easier user interaction, being abel to quickly slide between channels, rather than needing to click the arrows multiple times to try and find the channel you are after.

At the end of the session, we were randomly split into pairs, in which we will spend the remainder of this term in, and we will work with one another on this interface project. I was paired up with Alfred Hoi.

Over the next week, we have been asked to come to do one reading on paper prototyping, which can be found on stream, and also think of a minimum of 3 different scenarios that we could design an interface for. We stayed for a bit longer after class in order to come up with a wide range of ideas for our interface, and decided that we would try to think of a few more over the course of the next week as well.

Case Study Two - A Good Interface

For my second case study, I have chosen to use a website that I refer to multiple times on a daily basis. One of the reason's that I consistently use it, is because it is easy to navigate, and has many good features about it. This website is a news source website known as "News Now", and I always use to it keep up to date with all of the latest football gossip. However, it also has news sources on a large range of worldwide events and issues, along with current events for each country, and doesn't just focus on the sporting industry. In this case study, I'm going to go through and name all of the features that make me continue to use this website, rather than jumping ship and looking for another, more effective source of news.

The screenshots I have taken for this case study have been taken from http://www.newsnow.co.uk/h/Sport/Football/Premier+League/Chelsea.

Firsty, although the layout isn't the most appealing (a screenshot is shown below), the functional aspects of the site is very, very good. For a starter, as we generally read right to left and top to bottom, it makes sense to have the "News Now" logo in the very top left hand corner. It's been linked so that if you click on the logo, it takes you back to the News Now Homepage. It is easy to be aware of the fact that you can click on the logo, as the cursor shape changes to a hand icon with a pointed finger, indicating that it is 'clickable'.

Below that, as you can see in the screenshot, is a row which shows all of the sub-categories that have been accessed in order to get to the page you are currently on. So for example, in the screenshot I am searching for news about "Chelsea" (an English football team). They play in the Premier League (hence the sub-category just before 'Chelsea'), they play Football, and Football is a Sport. If I wanted to go and look at news related to football as a whole, it's as simple as clicking on the label "Football". When you hover the mouse of it, the cursor again changes to a hand symbol, while the label itself becomes underlines, a further indication that a click of the mouse will take you there.

On the left, I have inserted another screenshot, of the side bar on the left hand side. It is a very well designed interface, as it has an option to search for keywords, along with search via the drop down menus. Below the search bar, are the labels from the top of the page (the sub-categories) in a drop down form. This is extremely helpful as if I want to go read about another team in the Premier League, rather than click on the 'Premier League' label at the top, and then find the team on that new page, I can do it all in one go, by hovering the mouse over the 'Premier League' label on the left hand side bar, and then the drop down menu will come up with a selection of all of the teams.

Along with that, if you would like to narrow your search down to subcategories within 'Chelsea' such as 'Injuries and Suspensions' or 'Transfer News', you can do so via the side bar menu. Further sub-categories can be accessed by the drop down menus in tabs such as 'Midfielders' which then lets you choose exactly which football player you would like to read about. The drop down menu has also been well-designed so as you move your cursor over to it, you have plenty of time to highlight the category you want, as some poorly designed sites have drop down menus which disappear before you can even move your mouse to where you want. Again, the cursor turns into a hand, while the label that you are hovering on top of turns blue with white, underlined writing, making your selection extremely obvious. The left hand side bar is one of the features that I use the most in order to navigate my way between different news sources.

In the above screenshot, is another feature that I really like. When you click to
 read an article, it automatically opens that article in another tab, rather than in the one you are currently using. That way you don't need to keep on going back once you have finished reading the article, and you can also have multiple articles loading simultaneously this way. Once you have opened an article, the title of the article on the main 'News Now' page will turn to a green colour, indicating that you have previously opened this link. This feature is very helpful when I am reading a lot of articles in a day, as if I come back to the site later on in the day, I can easily see which articles I have already read, and which ones I am yet to read so far.

On the left hand side, is a snippet of the right hand side of the website. Another toolbar. In this section, it shows you the most read stories from the last 24 hours, along with the previous top stories. I really like this, as if I haven't been on the site in a day or two, I can easily look down into these two columns and see which articles are recommended to catch up on and read. When you go to click on a link, the cursor again turns to a hand, and the text becomes underlined. Below each article, it says the name of the source, so you can choose functions such as 'hide publication', if it's one that you don't necessarily want to see continuously popping up. If you go to click on that link, the text turns red, and also becomes underlined.

Again, the link then turns blue once you have opened it, to indicate that you have already opened that link.

On the left hand side, is a screenshot of another section of the page. This is located just below the sections "Top Stories" and "Previous Top Stories"

This has been designed to show the stories in which you have most recently read. This is helpful in case you are looking to find the article again, yet it has disappeared off of the main home page. This section shows the 10 most recent, and there is an option to get rid of these, if you don't want the page to show them. To do so, you click on the red cross on the right hand side of the article.

Last but not least, I want to talk about another smaller functions in the thin screenshot above. This is at the very bottom of the page. There are a few links that you can click in order to contact News Now, subscribe to their articles, and various other options like that. However, there is also a feature that they have incorporated which auto-refreshes the page every few minutes, and the timer down the bottom tells you how long is left until the next auto-refresh. I find this helpful, in certain circumstances like on transfer deadline day, when there is only a few minutes left of the transfer market, and you are dying to see if your club signs any new players. The auto-refresh refreshes the page and brings you the latest batch of news every couple of minutes without the click of a button, so it can continuously reel in more news, even while you only have the tab open in the background.

Another aspect that I like about this site, is the variety that it sources to the public. It gives the reader multiple choices of which article they would like to read, and notifies them of which website it has come from. I find this helpful as some sites, such as 'Daily Mail' and 'Sky Sports' for instance, are more reliable than 'Vanguaard' from over in Nigeria.

So overall, due to the extremely good functional qualities of this site, I continue to use it to keep me up to date with the most recent football news. If the interaction wasn't as positive, I am sure that I would look elsewhere for a better functioning site. This goes to show that the ease of interaction is a key part of a users experience, and plays a big part in their decision of whether or not they want to continue using this interface. In all honesty, good interface designs almost make you return to them without consciously thinking "I'm going to use this interface because it's very functional'. However, a poorly functioning interface immediately makes you blame the difficulty of use, and poor interface design for your bad experience. By creating a case study on this interface, it has actually make me consciously aware of how good it really is.

Case Study One - A Bad Interface

For my initial case study, I have chosen to analyse the website for Sky Go, which is a site that lets Sky TV subscribers watch certain channels and programs from their laptop or computer. For this case study, I am going to examine a few of the main reasons why I think that this interface is bad, or possibly not as effective as it could be.

The site I am analysing can be seen at www.skygo.co.nz

Below, I have included a screenshot of the initial homepage. Despite the layout being very aesthetically pleasing, and looking very well designed, it is some of the more intricate interactions with the website that push it in the direction of a negative interface. The main problem is the difficulty to get to channels and see what is on TV at certain times.

So looking at the screenshot above, the site looks very user-friendly, and is actually rather appealing to the eye as well. The composition has been well thought out, and there are clear labels etc showing the user where to click. My main problem is when it comes to the next window. So in order to watch something Live, you click on the "Live TV" tab, and it will bring you to a page that should look identical to the screenshot below.

Here, as you can see, is the where you can sign in and then watch whatever is on. However, my minor issue with it is that if you want to watch something on another channel (that isn't shown on the bar at the top) such as ESPN, you have to click the arrow next to the channels, in which it only moves the labels across one square, rather than a few at a time. Although it's only a small issue, it is just more of a hassle than it needs to be. It could easily be navigated through with a slider bar, rather than needing to click the button 5 or so times to get to ESPN 2.

The other small issue that I have with this interface is the search bar, located at the top right hand side of the central grid. It's easy to find, however searching in the search bar is generally inaccurate, and won't actually give you information on what time the program or sport it showing. If you are searching to see when live sports events are on, it won't actually tell you, as it doesn't seem to recognise that the games are normally at varying times, so it doesn't show any times at all, therefore rather unhelpful.

This case study goes to show how with interfaces, it's only small, often niggly issues that can quite often annoy the user, or get the user to notice it. Quite often small issues with user interaction can lead to users trying to find a different site to use instead. However, I still stick to using this as it's the only place I can safely watch the live sports for free, at a reasonably decent stream quality.

Next I will analyse a good interface, for my second case study, which will be done in the next few days.