CSS Demo Critique

Grid Layoutit!

This CSS demo allows for users to create a grid layout in CSS easily by having a manipulatable visual representation of the grid. Actions the user can do includes adjusting the sizing of each grid cell, adding and removing rows and columns, and naming each cell. After using it for a bit, there were several issues that I noticed.

The first thing that I noticed is that it allows for users to vary the units for rows and columns. This allows for a variety of use cases, which is good for users. However, there is a bit of an issue with efficiency in their implementation. The common use case of the user wanting all rows and columns to have the same units isn't easy to do; currently, users have to manually change the units of each row and column. The more rows and columns a user wants to put, the more time it will take to do that. I think that an easy way to fix this is to have a "standardized unit" button so that if it's checked, the user can specify which unit they want and it changes the units of each row and column to the specified one at the same time.

Another issue that I noticed is that when attempting to name a grid a name that is already in use, clicking save doesn't do anything. This is a bit of an issue with learnability since the user might not necessarily know that they can't have duplicate names for cells. There is no feedback for the user that lets them know that their input isn't valid. In order to give users a nudge in the right direction, they can add an error message that says something like "names for cells must be unique. 'random_name' is already in use in row 1 column 1". That way, users will know that they need to change the name of one of the cells.

border-image.com

This CSS Demo allows for users to easily put a custom border around an image using CSS. Users are able to provide an offset and specify a border thickness for each side, provide the image that they want the border on, and choose the border color.

One issue that I noticed when using this was that there was no way to undo or redo a move, which makes users reluctant to experiment with the app in fear of losing their progress. This affects both the learnability and safety of the app. Adding an undo and redo option would greatly improve the user experience of this app.

Another thing I noticed was that the method of specifying the size of the offsets and width of the borders were slider inputs. Next to it seems to be a input box where the user can click up and down to increase or decrease the offset or border. However, there is no number or units in the input box nor under the slider bars, which doesn't make it clear to the user exactly how much a value they inputted was. The user would effectively have to eyeball it if they wanted to make two values the same, which might be frustrating. These issues impact the efficiency of the app, since the user has to put much more effort using the app the way they intend to. However, I think that having both the slider and input boxes is a good start since it allows for multiple methods of input, each serving a different purpose; the slider allows for users to be able to see a gradual transition of sizes and offsets to determine what they like best and the input allows for users with a specific goal in mind to quickly put their input in and generate the bordered image. I think that a way to improve upon this and to fix the issues mentioned above is to have the corresponding number and unit either under the slider or have it show up in the input box.