Week Four

Monday (18/02/2019).

Goodreads app investigation.

On Monday, I started to investigate the Goodreads app. This was mentioned in the ‘developing an app idea’ lectures as part of CS31620. When analysing the app I thought about several things such as:

• What features do they emphasise?
• What kind of structure does the app have?
• Is there a better structure that concentrates on the content?
• What do I like about the competitor?
• What could be better in the competitor?

I also analysed the pages that would be most relevent to my project. Goodreads gives you the ability to manage shelves, add or remove books, review books and provide recommendations. The UI is nice and easy to use, however, it is one of the few apps where there is a notable difference on an IOS device. One thing I noticed was that the Goodreads app used a burger menu and tab bars instead of a bottom navigation draw which is what it uses on an IOS device.

UI Testing.

On Monday I started working on UI testing, this would be automated and would perform certain tasks to ensure that the UI was working without requiring user interaction. Thankfully, Xamarin provides support for UI testing, in the form of a project called Xamarin.UiTest Cross-platform test. This would allow me to add UI tests to my project.

After reading this guide, and looking at this tutorial, I realised that the UI tests would require labels etc,. to have an automation ID, this would be used to refer to the elements in the UI test which would be in a separate project. I would also need to install the following nuget packages:

• NUnit.
• NUnitTestAdapter.
• Xamarin.UITests.

However, one problem I had was that the tests weren’t running. Whilst investigating the problem I came across this forum, and this forum. After reading these forums, I amended my project and added the device ID to the UI project. I managed to successfully get the UI tests working.

Tuesday (19/02/2018).

UI Testing.

On Tuesday, I finished working on the UI, I continued working through this tutorial. This tutorial helped me to create a sample project that would contain my UI Tests. After doing this, I decided to implement UI tests on my own project. This would ensure that I wouldn’t forget about them when working on the implementation of my project. I used the buttons that I had previously created, and wrote a method so that when you clicked on them it should a message. I then wrote a UI test to ensured that this happened.

I also renamed the unit test project in my project from UnitTestProject, to LibrarySystem.UnitTest. Similarly, the UI test was called LibrarySystem.UITest this ensured that the projects were easy to find in the root of my project.

Investigating other apps.

After this, I started investigating other apps similar to Goodreads. However, unlike Goodreads I was unfamilar with all of these apps. Once again I went through all the questions mentioned in the lectuares, and then analysed the pages relevent to my project. The apps I decided to analyse were as follows:

The Library Thing app: app empathises browsing a catalogue of books, adding books to shelves. This is the only app I analysed that has a bottom navigation draw. There is an option to scan books, and you can also add books to shelves. This helps to organise the books.

My Books- Library: this app empathises browsing through a catalogue of books, adding a book by scanning it. You can view your shelves. There is just a burger menu that contains all the links, no bottom navigation or tab bar. There are back buttons when you go deeper into the app. You also have the ability to scan books, but it’s only a barcode scanner. You can sort and search through books, you can add books to shelves, FAB button makes it obvious how you add a book. However, there isn’t a save button when you’ve finished adding a book, no feedback for the users.

Me Books app: empathises browsing a catalogue of books, and downloading and reading books using the app. Once again, only has a burger menu, but there is a back button for when you go deeper into the app. Cleanly shows a list of books, large click areas. However, the error messages aren’t clearly error messages, they are just toast messages. Additionally, there isn’t any filtering or searching for books on the page, searching is only accessibly via the burger menu. However, there is a bright and colourful UI. Similarly to the other pages, there is just a burger menu for navigation making it slightly messy.

Books I’ve Read: this app empathises reading books, adding books to shelves, viewing books you’ve read, different shelves etc. In this app there is no bottom navigation or tabs, so it’s hard to navigate, everything belongs in the burger menu. There is a floating action button that makes it obvious how you add a book, I also like the book quote on the first page of the sccreen. However, I found this app to be not intuitive and it doesn’t require camera access, you have to add a book manual. Additionally, you can’t sort the books.

In conclusion, I have decided that similarly to The LibraryThing app I will create a bottom navigation draw. However I will create a burger menu like the other apps, but I don’t want this to be crowded and chaotic. I will also ensure that there is a back button to make sure you go deeper into app. I will also add a book quote similarly to the ‘Books I’ve Read’ app. I will also ensure that proper error messages are displayed and not just toast messages.

Wednesday (20/02/2019)

Looking at accessibility.

On Wednesday, I starting looking into accessibility, and how to make mobile apps accessible, and what opportunities Xamarin provided in terms of accessibility. I looked at the Xamarin accessibility guidelines and then I looked at the platform specific APIs that were included as part of the documentation.

I also continued working through the slides for developing an app idea. I started thinking about the following scenarios:

• What should the user see when they start the app in normal use?
• What does the user see when they start up the screen for the first time?
• How do we move between the screens (buttons, tabs, tables)?

While answering these questions I started prototyping some of the screens, and I also looked at the Android Style Guidelines to ensure that my designs complied with the style guidelines.

Thursday (21/02/2019).

Estimating tasks and times.

I then created a new sprint for the upcoming week and started estimating tasks. After my meeting on Wednesday I had a good idea of what I wanted to achieve this week:

• Design screens by hand. This included designing both user screens and screens for the library employes.
• Design screens using Adobe XD. Again, I split this into subtasks for both the user and employees. I also would need to find icons, modify the logo, and think of a colour scheme.
• Perform some evaluation. I would get some people to perform evaluation for the user, and others to perform evaluation on the screens for the employee. I would also need to think of some criteria.
• Modify the screens based on the feedback.
• Create diagrams. This included creating UML class diagrams, entity relationship diagrams and sequence diagrams.

Unlike last week I was more realistic with my estimates. However, the times of the tasks, were more than the capacity, despite this I included all the tasks, since my goal is to ensure that I begin coding by next week.

Thinking of a colour palette.

After this, I started thinking about the colour palette. I used this tool which is mentioned in the Material Design guidelines. I then started looking at some articles on the significance of colour.

I looked at this infographic, which states that green is the easiest colour for the eye to process, and blue represents trust, peace and calmness. Additionally, this article states why blue is the most popular colour in web design. Blue also represents efficiency, clarity and simplicity. This, was one of the factors in me choosing this colour, however, I decided to use cyan (which is a mix of blue and green) as the accent colour.

Redesign Logo.

After this I decided to redesign the logo. On Wednesday, I sketched out some new versions of the logo, and I recreated the logo using Inkscape. For the logo I also used this image of a bookshelf.

This is the primary logo for the app:

This is the secondary logo:

Friday (22/02/2019).

Designing screens on paper for user.

On Thursday, I started working on the screen designs on paper. I firstly, started working on the screens for the user and designing what they would look like. Fortunately, as part of my research I had already got an idea of what the splash screen and the home page would look like.

During the designs, I covered all aspects of the app, making sure that the most important stuff was easiest to get to. There is a bottom navigation draw that illustrates the most important activities, and for things such as ‘renewing’ and ‘requesting’ you can get to these actions on a variety of different pages. There is also a burger menu that displays your favourite genres, which can be edited there. You can also change account settings and logout via this menu.