Interrogate an Interface

Analysis of CodePen Interface

CodePen (http://www.codepen.io/) is a website for web designers and developers to basically show off cool things they can do with web coding. The website gives you three blocks for implementing HTML, CSS and JavaScript, and then gives a last block which acts as a browser window and displays the results of the coding. Examples of results include games, artwork, web layouts and more.

A basic display of the primary CodePen interface.

A basic display of the primary CodePen interface.

Signing In

For the average web user, CodePen is a pretty much useless site, other than for browsing the cool things that users post. However, for web designers and web developers, this website is a hotbed for inspiration and coding assistance. An average user, perhaps a student who just got into coding, can sign up for a basic account for free, which gives them access to the use the code pen interface, create a profile, and comment on other “Pens” throughout the community.

Once you venture into the more advanced packages, however, CodePen becomes a much more powerful tool. “Pro” and “Super Pro” paid accounts allow the user access to unlimited Pens, live viewing as they code, collaborative projects, professor mode for teachers, up to 5GB of hosting, and much more. These bonus packages make CodePen an excellent website for designers, developers, and professors. The actual interface of sign-up is very simple, adding to the overall “modernity” of this website. They only ask for the bare essentials, which would certainly please many busy web designers.

The simple sign-up form for CodePen users.

The simple sign-up form for CodePen users.

Home Page

The home page for CodePen is simple, sleek, and well-organized. A top navigation bar features the CodePen logo, as well as button for “new pen”. Below the first navigation bar is a second navigation bar, which can then be used to sift through the various Pens throughout the community. The navigation options are simple, yet effective; again, I believe CodePen was trying to make their website as simple and modern as possible, while still giving it a techy, creative feel. The navigation options include “Picks”, “Popular”, “Recent” and “Tags”. This may be one of the first constraints about CodePen; in going for a simple approach, they left some aspects to be desired. With only four categories to choose from, it may take a user sometime to find a particular Pen that may not be easily found using tags or search terms.

The “Picks”, “Popular” and “Recent” pages all use the same page layout, which is pretty simple to navigate. It features a grid-like structure, which displays 9 previews of Pens per page, with an arrow at the bottom of the page to see the next 9. Each preview is a small block that features a small picture of their coding results, as well as their username, the number of comments, the number of views, and the number of “hearts” which is the CodePen equivalent of a Facebook “like” or Google+ “+1”. A hover over the preview gives the Pen’s name, as well as a short description of what the coding is made for. This is a very encompassing way of browsing the website, as it gives you almost all the information (except the code itself) in the preview. As stated before, busy web designers and developers would surely like this approach, as they get all the information they need in one quick hover over the preview.

The homepage of CodePen; this is the basic browsing format.

The homepage of CodePen; this is the basic browsing format.

“Tags” Page

CodePen also features tags and search options for a more precise method of finding Pens. An aspect of this website I really enjoy (and I think is extremely effective) is the “Tags” page. 100 buttons line this page, each a small rectangle with the name of the tag on it. They are aligned forming a giant box, and the most popular tags start at the top left and then goes to the right down the box. The cool thing about this is that the entire box is color-coded; the deep red is the most popular, and the colors slowly change hue all the way until a pale bale at the least popular. This color-coded method of formatting the tags is extremely handy; it allows a user to visually and linguistically observe the most popular tags, while also including a unique spatial component (the giant box of colors). This table might have also been made like this because it’s a beautiful example of what coding on the web can do, which is what CodePen is all about.

The unique layout of the CodePen "tags" page.

The unique layout of the CodePen “tags” page.

“Pen” Page

The heart of CodePen is obviously the actually coding page. As stated before, the coding page offers three dark grey boxes for coding HTML, CSS and JavaScript. You have three different options for the alignment of the boxes, which gives a coder a bit of preference. Additionally, a user can choose to close one of the boxes, which is an affordance when working on a project that may not include CSS or Java. There is also a toggle-enabled shortcuts button in the bottom right. This is another great use of spatial, linguistic and visual factors; when clicked, a menu pops up that includes keyboard shortcuts that are specific to when working with CodePen. This in-server addition makes me feel as though CodePen could almost become standalone software; the hotkeys are a best friend for designers and developers who want to conserve time and keystrokes by using the shortcuts. Finally, each text block color-codes and indents the HTML/CSS/Java that a user would be writing, working like a text editor such as Komodo Edit. This is another very nice affordance to users who need to navigate sections of their code; being color-coded and hierarchically structured makes for easy navigation.

An example of myself coding on CodePen.

An example of myself coding on CodePen.

The unique shortcuts menu that can be used while coding.

The unique shortcuts menu that can be used while coding.

CodePen Community

Another very unique aspect of this website is that it almost works as a form of social media. It’s comparable to social media like LinkedIn with the fact that your “profile” displays, most likely, professional work. Users can follow each other, organize a showcase of work, and “heart” and comment on others’ work. Profiles are simple in layout and can work as a portfolio of sorts, including a picture to be used as an avatar.

Mobile?

The website works on a mobile version, though everything is very constrained and it involves a lot of scrolling. Unfortunately, this website is pretty much useless on a mobile version since typing code on a phone is extremely tedious. However, since the mobile version still includes all the same features as the laptop version, it could theoretically be used for small, quick changes to code on the fly. This interface is most definitely made for use on laptop, while a tablet may also suffice but be a bit slower. For simultaneously writing and editing three web languages, a decent sized screen is needed. While this is definitely a constraint of the interface, I don’t think it necessarily takes away from what CodePen does. Coders would never really need to use a mobile version, since the task of coding involves making many keystrokes, something not quickly done on a small phone.

Final Reflections

Overall, the CodePen interface is sleek, modern, and easy to use. Its simple design compliments the simple idea of the website. It’s a great website for designers and developers, who are most likely the only users of the site; it’s advanced genre limits the amount of people who want to use it. Its affordances include easy navigation, convenience, professor perks, collaboration, community, and a wide use of spatial, linguistic, visual, and gestural elements. The website’s constraints include its difficult mobile version, the lack of instruction for those completely unfamiliar with web languages, and more-advanced features only available to paying customers.

Leave a Reply

Your email address will not be published. Required fields are marked *