Exercise B: Finding More Usable Mobile Edtech

This exercise is a continuation of Exercise A: Identifying Usability Issues. Please complete that exercise first.

Context

Now let’s enter the educator’s shoes. For this exercise, pretend you are the art professor who assigned students the colour palette activity in Exercise A. Your students’ results on the assignment have been very poor and some of them have complained that the website you asked them to use did not work well on their phones.

Your Task

  1. Grab your mobile phone and do some searching online to find a more usable alternative to the colour palette tool you used in Exercise A.
  2. Try at least 3 other colour palette tools, reflecting on the usability of each one.

Make a Post Below

Now that you’ve completed the task, please share with us:

  • Post a link to a colour palette tool you think would be more usable for the student assignment described in Exercise A.
  • Reflecting on our mobile usability guidelines, tell us why your chosen tool is more usable.
Previous Exercise
Next Exercise

29 replies on “Exercise B: Finding More Usable Mobile Edtech”

https://coolors.co

color.adobe.com

colormind.io

These are much better than icolorpalette.com The one I prefer the most is coolors.co . The site is clean, simple, and very straightforward. coolors.com offers a mobile app. The “make a gradient palette” and “pick palette from photo easy to use commands. The provided content and visual elements are responsive, there is no a lot of extensive scrolling, which keeps me attentive on what I need to look at. The font size is just ideal, I had some difficulty with the font size on the icolorpalette, I thought that the font size could have been larger. The simplicity of the site makes it easy to navigate and also easy for users to understand how to use the features that the site offers.

The colour palette generator that I found as a replacement would be Canva’s integrated tool that can be found on https://www.canva.com/colors/color-palette-generator/

Since it is a tool designed for a specific task, the UI is very straightfoward. It gives you a direct image upload, and the colour palette it generates is not only big and bold but gives associated colour names and hexcodes. This means that Content Organisation and Navigation is clear and organised all on one page. Layout is logical, and takes you from a small intro directly to big buttons for image upload so it has clear selection based commands too. There is feedback and indication that your image is uploading, and then it displays your image followed by the labelled palette below. As a tool part of a broader site, it is consistent with the standards for the rest of the site too.

I’m actually going to fail this task. I didn’t particularly like any of the three websites I had selected from my search (paletton, color hunt and coolors.co). The coolors.co site had too many pop-ups and annoying windows to close, I found it very distracting. Color hunt felt more like a Pinterest site than a site that would help match pictures and colour palettes. Paletton was very dark and the text was very difficult to read. I think I would return to the students and enquire as to what their difficulty was with icolorpalette.

I liked mycolor.space
They generated palettes for you in many different shades and was mobile user friendly.

The first website to come up in my search was colorhunt.co This website also passed many of the key guidelines and has great usability but limited utility. I liked how it was organized – almost like a reddit post for color palettes where user submit palettes and vote on others by liking them. This was useful for me and interesting as well to see what was popular and what was trending.
Then reddit took me to Adobe Color and a very intriguing site coolors.co. This site start by encouraging the user to download extensions for Chrome, Adobe and Instagram. This make this tool more attractive as accessibility enhances its usability. This option is also what I like about Grammarly, and Mendeley

I enjoyed Adobe Color. https://color.adobe.com/create/color-wheel
(However, I just went to the site on my laptop to grab the link and it was a little different). For the mobile app it was very straightforward to use. The front page had little to know scrolling and it was very clear on what the visitor was supposed to do. The top menu bar was easy to see and with little text it said “image.” That is intuitive to uploading. The image was easy to upload and it immediately produce the 5 colours and the ID numbers. You can move the colour dots to different colours on the picture because it didn’t ask you to download anything, you can easily manipulate it on the website. This program felt as though you could take it on the go. I would recommend this mobile friendly website over icolorpalette.

Hi Kristin, I was not able to find the app on the APP Store for some reason. What does the logo look like? Thanks!
Ceci

I searched Adobe Color: https://color.adobe.com/create/color-wheel

Everything was very clear in description & well explained in instruction. The design and visual images were appealing and supported user accessibility. The layout seemed very straightforward even in the organization & flow of site. I preferred this color palette site.

I first tried the colour design tool from material.io but got a message that read “Demos only available at larger screen size” which was surprising to me!
I then tried flatuicolors.com, which has ready made palettes but doesn’t allow you to build your own.
Finally I tried Adobe Color, which was by fair the best of the three I tried.

One of the websites I tried was https://mycolor.space/
I found this way more mobile friendly and super easy to use compared to icoporpalette. It wasn’t exactly the same in that I couldn’t upload an image and generate a palette, but it asks you enter a colour and generates many different palettes based on that colour, with matching hues, different ones, complementary ones, etc. It is quite a lot of fun to play with of you know the hex code for a colour, and if not, it can be easily looked up. It also generates gradients and you can pick the direction for the shading!

A second tool I tried was https://palettegenerator.com/
This was also more mobile friendly, easy to upload an image and it automatically generates a palette with the dominant colors in the image uploaded. All uploaded media is deleted within an hour and the slider below the palette let’s you choose up to 10 dominant colors. You cannot make your own palette though, and ads take up a lot of space on the site, but it’s very easy to navigate and get the job done.

The third website I tried was http://www.colorfavs.com/
This one is also very mobile friendly, let’s you upload an image from your device or from the web, generates a palette instantly, recommends other palettes you may like, other colors you may like, let’s you “like” the palettes and also add them to a collection. The latter may require you to sign up for an account. The menu is easily accessible, the site is intuitive and easy to navigate, well laid out, and seems mobile first.

I started with paletton but found it dark and hard to use, the colours were difficult for me to manage and chose, then I went to colourspace and tried it out. The content was displayed in an organised manner and it was easier to navigate. The visual representation made it easier to know where to go next.

I really like coolors.co too! I found it simple, straight forward, and easy to navigate through the site. Looking at the others’ comments, I only had one popup at the beginning. What caught my attention on this site was “Explore trending palettes”. I find choosing colours overwhelming, so I like the palettes already chosen and trending. I am sure students would feel similar and take a long time to choose and commit to a palette. Thanks for introducing me to all of these colour palette generators. I have never used them before!

In looking around, I would have to say Adobe’s was my favorite. Looking at it, pretending to be an art teacher (I feel like I would struggle the most with teaching art) I think there were a lot of elements that would assist with teaching art. Although the mobile site and the computer site were different, the main elements were there and they were not too different.

An alternate tool that I found to be more usable is from Canva. Truth be told, I am already familiar with using Canva and have played around with this in the past. It is easier to navigate around from either my mobile device or laptop and I am able to choose colors and color schemes fairly easily. I also played around with a few other color palette generator sites such as paletton.com, colormind.io and coolors.co. I found colormind.io and coolors.co were fairly user friendly, especially to a beginner such as myself.

I mentioned this in Exercise A as well since I didn’t know Exercise B was going to be searching for a similar website, but my preferred tool is https://coolors.co/
I’ve used this tool before exploring this OER and even after looking into other pallete generators, it is still my favorite. As others have commented, it is very user friendly and designed with a clean interface with obvious buttons to guide users through the experience. One of the things that bothered me with icolorpallete.com was the distracting ads. While colors.co also had advertisement, they are a lot smaller, less flashy, and come in the form of a small pop-up that can be easily closed. This really helped reduce the impact of ads on navigation and increased mobile usability.

I compared coolors.co, Adobe Color and Palette Republic. Had fun playing with all three. Palette Republic is an app that is super easy to use. Navigation is simple, its design and visuals are aligned with other mobile apps and experiences so that there are no learning curves to me. It also provides users with feedback cues to indicate what’s up next. For example, “Are you done exporting your creation? If you exit, you will return to the main menu.” Great feature! The app of Coolors costs $3.99, so I only tried out its website. Not being able to find the Adobe Color app, I tried the website as well. Both Coolors and Adobe Color websites are very user friendly on the phone, I think I like them better than icolorpalette just because the menus follow the less is more principle and do not require extensive scrolling. Navigations on both sites are straightforward, simple and pleasant. Comparatively, the icolorpalette Color palette generator page is quite busy.

I found https://color.adobe.com/create/color-wheel the best for what I do which is just to find the hex codes for colors. It is also very easy to use. I found https://mycolor.space/ interesting and looks cool but I would have to play around with it. For someone who knows very little about color palettes https://www.canva.com/colors/color-palette-generator/ had the most information to educate a novice so that the best feature for me. I did not try to figure out how https://palettegenerator.com/ . Lastly, https://icolorpalette.com/ is easier to use on a computer. This was great! Thanks folks!

I tried mycolor.space
You can create many different shades but I didn’t see the point if you can’t upload a picture.
Then I checked out coolors.co. I was pleasantly surprised to find it easy to navigate. I didn’t mind the pop-up as I got some information about this app while going through the different slides.

I tried Adobe Color but I prefer the Adobe Capture app (which also lets you identify typefaces and create patterns from AR images). It uses AR and selects colours to make a palette which you can then edit. You also have the option of uploading a photo from your phone, Creative Cloud, Lightroom, Stock photos and other files.

I tried Adobe Color, an app from a paint company called Pantone Connect and finally one called Colordot.

I had high hopes for Adobe Color, but as soon as it loaded I found myself trying to move the little circles around to change the colours in my palette (and you can’t). On my phone it ended up highlighting the image of the palette to copy and paste which really breaks the immersive feel. The slider bars for RGB were difficult to touch accurately and I kept “pulling” the screen from side to side which was a bit frustrating. I feel like I fundamentally don’t understand how to interact with palettes after this experience.

Pantone Connect also got me right off the bat because they have a dotted line rectangle with the words “drop colors here”, however when you go to drag colours into the box you can’t! You have to click the colour, and then click “Add to Palette” so the language is confusing particularly for a mobile app.

Colordot (color.hailpixel.com) was the perfect app for this assignment given they were instructed to select 5 colours. When you load the site all you are given is a colour, a prompt to download the native app and a help menu. As soon as you touch the screen you discover that by dragging your finger across the screen you can change the colour, and when you have the colour you like you can save it. Complete this process 5 times and you have your palette. Only then are you presented with more detailed options to customize/fine tune (when you’re ready to use them). But alas, when you go to customize the colours, the options get so squished that you either can’t see them or can’t read them. I would hope that the native app would resolve some of these issues.

I tried out two different sites…

kellymoore.com: This is an incredibly simple site. If students have to pick colours by hand and cannot upload a photo, this site works well. At the top is a scroll bar of all the colours available, but unlike the previous site we used, you can click to move the scroll one section at time rather then having to use your finger. There is a colour search function but you need to know the exact name or number of colour. Once you find your colour you can click on it and it will tell you the name and number and has the option to add it to your palette. You can also go to colour detail which gives you complementary colours.

coolors.co: This site was more complex and had a lot more features that could be used. One section I found particularly interesting was on the “Color picker” page – once you had chosen a colour, it provided you with the conversations, variations of the colour (tints, tones…), colour harmonies, blindness simulator, contrast checker and other colour libraries. It’s a well organized, visually appealing site, and I think there is a lot more to do and learn with it.

I found Coolors.co to be very user friendly, minus the ads and pop ups on the first page. I was able to upload an image and create a colour palette from it that was visually appealing. I like the ability to lock certain colours while generating new ones. I feel from a professors side this website would be great for students.

I enjoyed using coolors.co.
It was very simple to use and user friendly. The instructions were clear to follow. I especially liked the “Pick palette from photo” feature on the website which fits the assignment very well. I picked a photo I liked online and it allowed me to pick five colors in the photo to create a palette. The simplicity of the website made me want to explore it more whereas icolorpalette frustrated me and made me not want to continue.

I tried to play around on Paletton for a while, but as Carla said, it was very dark. And further, it too isn’t mobile friendly. But I suppose that’s fair as these tools are for graphic design and people simply aren’t doing serious graphic design on a mobile phone.

I tried downloading a few mobile applications. Drop is an application that worked well on my phone. It allows you to upload a photo and provides the option of either manually or automatically selecting your colors for the palette. This can be helpful for individuals that are finding it challenging to choose their colors. There is a +/- sign that allows you to add or remove colors to/from your palette. One element related to usability that I couldn’t quite find was an application that allows you to select a color as precisely as you would on a laptop. In my opinion, our mobile phones lack the precision that a mouse provides.

I went to the appstore and looked into the highest rated colour palette apps.

Palette – okay, auto generates colours from a photo and shows the population of each but it was hard to edit the colour individually

Croma – you can pick colours through your camera without taking a photo which is fun! max 4 colours with free version and hard to manipulate colours

Color Palette – **BEST but room for improvement ** easy to take photos, choose individual colours from photos and save palettes. The nicest user interface I experienced. The one downside is that you can’t easily manipulate individual colours

I tried three apps: Pocket Palette, Adobe Capture and Palette Cam

Pocket Palette: I picked it up because I am curious about how “pocket” it is and this app doesn’t disappoint me. It is a very friendly and simple app: create personal palette and provides users some samples. Since it has no function to select colours from a picture, I will not recommend it to a novice like myself.

Adobe Palette: the strongest app of the three. I only tried to use it to capture colours from a picture. It can automatically lock 5 colours when taking a picture. User can move those dots during and after taking the picture. The app runs fluently on my phone (iPhone XR). I will keep it on my phone for sure.

Palette Cam: in the middle of the previous two apps. Users can capture colours from a picture by selecting different areas of the picture. Since Adobe Palette is free and stronger, I will probably not use it.

I found Canva the be quite good in terms of usability. I like the fact that it gives clear instructions for use at the outset, and the buttons are clearly labelled. The manipulative for selecting colours was new to me, felt very user friendly, and also provided some context/theory for the auto-generate complimentary colours that it suggested to fill out my pallet.