Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Andrew Kendall #18

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Andrew Kendall #18

wants to merge 7 commits into from

Conversation

akendall
Copy link

My Process -

The first thing I did was decide I wanted to use an AngularJS platform. I felt more comfortable in Angular because it is what I have been using at my current company. I did a quick Google search to see if there was a good slider tutorial I could use as a base for the app I wanted to build. I found one that I liked--the git repository is https://github.com/simpulton/angular-photo-slider --and I used this for the base of my app.
I didn't want to build out the full node.js environment to run the app, so a cross origin problem was one of the first I ran into. To solve this I installed http-services globally on my machine and ran http-services from the directive where the app lives, which ensured that when I was getting the data from the gallery.json file I would no longer get a cross origin error and could use the data.
I started by setting the data from the file into the webpage. Because the images were sized differently, I had to fix how they were being set into the container. I did this by setting the max-width on the slider class, but because the width and height of each image is different I had to determine which was more important for user experience. I decided width was more important for this app, and so I kept the width size and hid the height in the div element.
I decided I didn't like the bootstrap.css for this simple webpage. I removed it and implemented a flex-box layout to center the slider on the page. In general I use bootstrap for bigger apps where I can use more than one or two of the classes. It was just not the best option for this app, and removing it requires less processing power because I no longer had to include the bootstrap file, even though this wouldn't be a problem for this simple slider application.
I loaded some of the problems and updates into the commits I made for this app. I tried to commit when I would make changes so the overall process was documented.
I believe the biggest problem I ran into was the image sizing. I feel like the solution I decided to go with was made through user testing and what I thought would be the best overall design for the application. Every user I tested figured out how to scroll through images, and there was a general consensus that the font was pleasing and easy to read. No user noticed any problems with the pictures, and they all enjoyed the experience. Granted there may have been some bias because most of the users were family members. The range of users were from a 65-year-old user with very little computer experience, who had never used a slider before, to a 28-year-old user who was very proficient with computers. There were also users in between who were able to look at the application and figure it out.
The last thing I decided to add was the automatic scrolling. I don't always love when an application runs without the user's input so, though it is set to scroll by default, if they interact with the app, the automatic scrolling will stop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant