Assignment
During this project, we took a closer look at progressive enhancement. This meant we took a close
look at the three layers that are central in progressive enhancement:
- Functional/reliable layer
- Usable layer
- Pleasurable layer
1. Functional / reliable layer
The reliable layer is the layer that always should work. No matter the circumstances. In this layer,
the core functionalities are the most important.
2. Usable layer
The usable layer is where the design meets the user. Think about information hierarchy and ordering.
Just keep the accessibility in mind while doing so.
3. Pleasurable layer
This is the layer where you can add functionalities that make the use of the application easier and
more fun. But these are by no means necessary. Just keep in mind, if the function fails in a
browser, the user should still be able to complete his task.
Description
This app is an online photo album. In the app, you can scroll through all the uploaded images. You
can view all the details by clicking on the image which will send you to the detail page. Also in
this app, you can make a selection of photos to add to a series and view this series as a slideshow
or in a carousel. Do you want your images added to this app? Simply upload them! Made a mistake? Go
to the detailed page to edit its content.
Highlights
Progressive enhancement
The photo album is still useable if the user is not able to use JavaScript or CSS.
I made sure all functionalities still work. In the image below you see the detail page of a Photo
where you are still able to add the photo to your series and edit its metadata.
Responsive
Another way to improve usability is making sure the photo album is responsive. By adding flex-boxes
and grid layouts the album already becomes very responsive. But since I used a row layout for my
overview pages I had to write some media queries to scale the number of rows. Ofcourse this is done
from a mobile-first point of view.
Geolocation
Adding a geolocation option is very close to the pleasurable layer, but in this use case, I actually
think it's still in the usable layer. Using geolocation you can add your location in the meta info
without even thinking about where you are at the moment. As the most beautiful images are mostly
made abroad and sometimes deep in nature, this option is very usable. I will explain more about how
this feature works in the browser testing tab, but in the gif below you can see that just by hitting
the icon your location gets added in the input field.
Drag and drop
Looking through your photographs, you finally find the one that you would like to upload. Hitting the
browse button lets you search your file all over again. This can be a very frustrating experience.
Using this drag and drop feature, you can just grab your file and drop it into the dropzone. And if
you're not at home and on a mobile device, you can just click on the dropzone and even choose
between taking a new photograph or selecting one in your files. The original method works just as
well, because, you can actually drag and drop onto an original input field with the file type. But
not many people know it, and you can't really style the element and tell the user you can. That is
why this is in the pleasurable layer.
