EDTECH 597: How Wind Turbines and an Old Viaduct Got me to Thinking About Better App Design

The user interface for my “No Texting While Driving App” for EDTECH 597.

I have said in my in-class forum posts for the EDTECH 597 mobile app design class that design must be more than just making something look pretty. It must also solve problems. However, I also know from my experience working in the newspaper business that good-looking design is important if for no other reason than to make people pick up and buy your newspaper or magazine. It is with this mindset that I approach the app class.

All Form and No Function…

What I have noticed is that very often my designs are heavy on pretty and not always so much on function. They’re not bad. They do work, but I just feel like I’m not yet emphasizing the UX UI (user experience, user interface) aspect of the designs as well as I want to—mostly because I don’t have a lot of experience in seeing how this is done—either from other apps or from design in general. There are a lot of great apps out there, but having not had a cell phone for several years has put me behind as a mobile app consumer.

But I found inspiration (or at least food for thought) this week on a site called Inhabitat.com. The story in question revolved around the need to redesign some old viaducts in the Italian countryside. The goal was to make them useful again and beautiful and to help revitalize the area through some environmentally conscious design using the existing structure. Additionally, the designers already had part of a structure to work with like we do with our mobile apps. They just needed to do something with what was already in place. The design highlighted on Inhabitat.com featured wind turbines that had been built into the support beams of the viaduct, making it look like a wall full of different sized clocks and giving it a funky 60s feel. And it was one of the most beautiful and practical applications of green design that I’ve ever seen. (Click on the red hyperlink in this paragraph to see it.)

The road and its supports already existed. It provided a partial framework for a project onto which the designers could add. Together, the viaduct structure and the wind turbines looked beautiful, so the design for this was able to meet my design criteria of the end product being both beautiful and able to solve problems at the same time. It had the added benefit of bringing two useful, but unrelated structures together in one structure. These are items that you wouldn’t necessarily automatically think would go together, but once they were put together, it was an “Of course!” moment.

The Hands Off App

As in the case of the viaduct, the usefulness of this week’s app design is already built-in, the beauty of the design is not. As I already mentioned in my design for the drawing app, I wanted to provide visual clues that tell the user what to look at even if they don’t have instructions to read. In the book, The Design of Everyday Things by Donald Norman, these types of visual clues are called ‘affordances.’ They are the visual clues that allow a person to know that a push-plate on a door means to push the door open instead of pulling it, that a knob means to turn and open, and a slot provides a place to insert something. It makes me wonder what—if any—affordances did the designers for the viaduct project see or maybe more accurately, see lacking and how did they land upon the design they did given the minimal parameters set forth by the beams of the viaduct?

So the question for me as I work on building this app beyond the basic prototype provided for us in the book is “What kind of visual affordances can I use to make this app more UX UI-friendly and still beautiful at the same time?” And more importantly, like the designers of the windmills, how can I use the structure of the design given to us in the book as the “No Texting While Driving” example and build on it so that it’s both beautiful and useful?

Advertisements