The reach of this particular interactive map doesn’t end with the browser/desktop.  It extends into mobile versions for iPhone and Android:

There are of course, other institutions integrating their mapping projects with Google, and I will list them at the bottom of this post.  But what I most appreciate about Missouri State’s map, is the nice video that Chad Killingsworth (@chadhikes) and the fine folks at the Office of Web and New Media put together about the project:

While the video provides a nice overview, it was obviously produced for a general audience.  As a college web guy, I want the deleted scenes, the nerdy behind the curtain stuff,  the directors cut.   And Chad has given that to us, in the form of several informative blog posts:

(in chronological order)

• Building the JavaScript for the Mobile Campus Map
• Going Mobile – Extending a Maps API Project to Smart Phones
• Google Maps API v3: Developing for Mobile Devices

Not only that, but Chad is giving a presentation called: Making your Campus Map Mobile Friendly at a Penn State Web Conference on June 8.  I wish I could be attend.  Zeldman and Brad J Ward are keynote speakers.

More on Chad’s “mobile maps” presentation:

Using the Google Maps V3 API for custom maps meant to display on iPhones or Android devices as well as the resources necessary to build an effective Campus Map.

Users more and more expect all of your sites to function on their mobile devices. When it comes to maps, they expect them to be interactive and useful on their mobile devices. When a visitor shows up at your parking lot, how do you get them to your admissions office or event location? I will also cover how can you manage a large number of buildings/locations within the confines of a mobile screen.

Leaning how to craft something and doing it well, is a good thing. Extra Extra bonus points for sharing your knowledge. Thanks Chad.

A list of other universities using similar Google’fied maps:

Oregon State:
http://oregonstate.edu/campusmap/

Towson University:
http://www.towson.edu/main/maps/

Rice University:
http://www.rice.edu/maps/maps.html

others?

As web workers in the higher ed arena, we all have a vested interest in the future our employers. The turmoil unleashed on the journalism sector and the music industry, precipitated by a tidal shift in the way people produce, consume, and pay for content, …has probably served to embolden a growing number of critics predicting a similar transformation in the university system.

I gave five minutes to Mr “marketing guru” as he made his case for a coming melt-down in higher education, and I read the Op Ed piece “The End the University as We Know It” from the New York times. There are other articles like this. Piles of them. Do I read them because I am a morbid pessimist? Or, am I simply cautious about a career in a higher ed landscape which (some say) could be drastically altered over the next ten years? Five years?

I don’t know. Who DOES know?

Regardless, back to the original purpose of this post, Tuesday night I will watch (and you should watch) PBS Frontline’s College Inc. which takes a hard look at the less traditional institutions providing alternative approaches to a growing number of college degree seekers. It should be interesting.

Higher education is a $400 billion industry fueled by taxpayer money. One of the fastest-growing–and most controversial–sectors of the industry is the for-profit colleges and universities. Unlike traditional colleges that raise money from wealthy alumni and other donors, many for-profit schools sell shares to investors on Wall Street. But what are students getting out of the deal? Critics say a worthless degree and a mountain of debt. Proponents insist they’re innovators, widening access to education. FRONTLINE follows the money to uncover how for-profit universities are transforming the way we think about college in America.

“In College, Inc., airing Tuesday, May 4, 2010, at 9 P.M. ET on PBS (check local listings), FRONTLINE correspondent Martin Smith investigates the promise and explosive growth of the for-profit higher education industry. Through interviews with school executives, government officials, admissions counselors, former students and industry observers, this film explores the tension between the industry—which says it’s helping an underserved student population obtain a quality education and marketable job skills—and critics who charge the for-profits with churning out worthless degrees that leave students with a mountain of debt.”

Fact: The team I worked with was amazing.  We kicked ass.  We took a terrible user experience (most online admissions apps are) and turned it on it’s head.  In all big projects though, you have little regrets, and little problems that you make notes to revisit, and fix.  Rinse and repeat.

Fact: University admissions applications, by their very nature, are lengthy.  This isn’t your grandma’s contact form.  We’re talking pages upon pages of information submission, each section confronting my shallow design assumptions with a seemingly unique, nuanced challenge.

My goals for this blog post are thrice fold:

1. I would like to share with you my pain
2. I would like to document a few pitfalls and lessons learned in the arena of application design and form design for my own future reference.
3. You few remaining readers of this blog are my children, and I wish to teach you, for I believe the children are our are future. Teach them well and let them lead the way.

Sparing you another unnecessary intro paragraph,  we begin with two images: An initial web mockup, and a screenshot from the finished, live site.

Those two images sum up my failure.  At the intersection Concept Steet and Reality Boulevard, there are pain points.  So if I could begin this project again, (like through the aid of time travel but not involving whales and starships) I would more eagerly throw every ounce of my energy at these three challenges:

Challenge #1: As a web designer you want to stay engaged in a project through the development phase.  You want the finished project to maintain the design integrity of the initial mockup.

Translation: Developers tend to focus on, well, development.  Stay in the loop.  Babysit the pretty, from beginning to end.

Challenge #2: With any design, but especially form design, you want to have a complete picture of the content requirements before you lay down a single, pixel, in Photoshop.  ( Fireworks, Illustrator, whatever )  This was my biggest lesson learned, by far.  I hadn’t anticipated the character length required for many of the form labels.  I made design and layout assumptions in my own little dream world, assuming everything would hold up when the “actual” form elements and labels replaced my nice, short, beautiful micro copy.

Translation: Messaging informs design.  Don’t start without the content.  Especially with form design, require ALL of the content up front.

Challenge: When you complete a design that has several layers of descriptive text, go to great lengths specifying the purpose of each unique section.

My form design incorporated several distinct text areas, each with a unique purpose. A top heading, a page title, a form-box label, a form-box description, form-field labels and short form-field descriptions. Add to that a “tips and info” box meant to provide answers to the most common questions.  The trouble is, I had a vision for how those specific text areas would be used, and I didn’t spend enough time coordinating and communicating that vision to everyone involved.

Translation: It’s hard to separate effective design from effective writing.  When one falters, both suffer.  Not everybody instinctively writes effective micro-copy.  Not everybody agrees on WHERE copy should go.  Sometimes you tweak text to fit with a design, and vice versa.

General Thoughts

Folks, it wasn’t that I was lazy.  Just misinformed.  Sure I’d design and coded web form elements before. And in this case, all I was required to do was mock them up, and somebody else would have to worry about implementation.  Dream scenario.  How could I possibly fail?

Add to that, I even had the amazing help of this book (given to me by Daniel) from Luke W.

Years of lamenting our unwieldy admissions application left me with a strong desire to help make our new app a success.  And hopefully my design decisions would play a supportive role.  Throw in the great book below.  All was set for 100% success.

The little parts of the finished, live application that bother me, at first I just assumed that I had been lazy.  The lazy liberal arts designer excuse. Yes, I will admit to that on occasion.

But not this time. I think this time I was heavy on effort but lacking in experience, and I made a few oversights in the design that I’ve attempted to document in this post.

But about the effort.

The effort I exerted to anticipate the kinds of elements the application called for, were great.  I had this giant adobe illustrator file with all the needed form objects, complete with example descriptive text, user-activated inline help, the works.  In the end, it wasn’t enough.  It didn’t scratch the surface.  I just didn’t have a good grasp of the content-requirements.

Screenshot of my illustrator file:

My initial design held up fairly well in most places, but it others, the weaknesses were obvious.  It’s difficult to always know all the needs of every project, in advance.  But still you gotta try.

Coming out of this endeavor, I’ve a newfound appreciation for doing prep work and leg work, and a more dedicated approach to fact-finding and pre-design analysis.  Yes, those aspects may seem tedious and unnecessary, but in the end (I’ve learned) it’s possible to do more of those things and ultimately save time, and have a better finished product.

Without these experiences with our admissions application, I wouldn’t have immediately appreciated this gem of a presentation from Margot Bloomstein at SXSW.  In it, she builds a case for the true value of thorough content investigation as part of your pre-design development process.

Title Slide:

http://tedxseattle.com/

TEDxSeattle (operated under license from TED) is organized by the Master of Communication in Digital Media (MCDM) program at the University of Washington.

The MCDM engages a community of leaders in the strategic use of digital media in communication. Through highly collaborative environments both online and in face-to-face work, the MCDM places great emphasis on relationship-building within the landscapes of digital media and communication. In this way, the MCDM is dedicated to the practice of what we like to call Community Scholarship. Our Flip the Media blog and our hosting of TEDx Seattle are just two of our efforts to engage the diverse members of our community, who collectively are developing new forms of communication strategies, platforms and content.

Maybe I’ll just have to wait a few years. TEDx Little Rock will be right after TEDx Amarillo.

Granted there are crossovers between the two media.  (Good TV content is often good web content)  But a focus on web requires a heck of a lot more than simply broadcasting and publishing messages/information.

Internet Surpasses TV as Most Essential Media

“For the first time, the internet has surpassed TV as the “most essential” medium, according to the latest Infinite Dial study by Arbitron and Edison Research.

When asked which they would choose if they must, never again watching television or never again accessing the internet, slightly more people chose TV as the medium they would eliminate. Forty-nine percent of respondents chose to eliminate TV, compared to just more than 48% who said they would get rid of the internet.

When first asked the question in 2001, 72% of respondents said they would do without the internet, while only 26% said they would eliminate television. In the demographic of persons younger than the age of 45, the gap between the two forms of media is more profound, with more people choosing to live without TV.”

Let’s face it, the staged photos of a professor leading a faux discussion with a group of students who happen to cover all races and genders isn’t going to cut it for much longer. Kids growing up in the user generated content era want to get the real info. They’re going to find your students sharing videos that you probably don’t know existed and their Facebook posts and Twitter updates. It’s those media touches that are going to make up a students mind, not the glossy view book.

Something to keep in mind for ‘10 and going into ‘11. How can we best tap into that base of content and get them to create content for us and how can we promote that content front and center. It’s going to scare the old school to death.

…found this post via the recent Higher Ed Experts Newsletter

Or, in the very least, they have an understanding of HOW their designs and IF their designs can be realistically, technically, implemented.

And this isn’t as easy as it may seem to the unknowing manager/administrator who may appreciate the surface value of good web design but may not understand technical taekwondo and craft involved to produce it.  It’s an unfortunate situation and is directly reflected by the compensation of web designers across the board.  Sure, some simply deliver mockups to developers.  But often our commitment to the project takes us way beyond photoshop.

Show me a print designer who doesn’t concern himself with holding a finished piece in his hands, and I’ll show you a web designer who doesn’t open a browser and nitpick.  Those people don’t exist, and/or they suck and should be fired.

Competent designers (print and web) care about the finished, “live” product.  And we must naturally concern ourselves with not only design, but production.  Not because we’re paid to be developers, but because we care.

A recent Smashing Magazine post provided a nice list of hurdles that we face when bringing design to the web, listed under the heading, “adaptive to diverse users”.  And this list, in a nutshell is what makes the transition from print to web so crazy:

• Browser
  Is the design attractive and usable with the most current and popular browsers? Is it at least usable with old browsers?
• Platform
  Does the design work on PC, Mac and Linux machines?
• Device
  Does the design adapt to low-resolution mobile devices? How does it look on mobile devices that have full resolution (e.g. iPhones)?
• Screen resolution
  Does the design stay together at multiple viewport (i.e. window) widths? Is it attractive and easy to read at different widths? If the design does adapt to different viewport widths, does it correct for extremely narrow or wide viewports (e.g. by using the min-width and max-width properties)?
• Font sizes
  Does the design accommodate different default font sizes? Does the design hold together when the font size is changed on the fly? Is it attractive and easy to read at different font sizes?
• Color
  Does the design make sense and is the content readable in black and white? Would it work if you are color blind or have poor vision or cannot detect color contrast?
• JavaScript presence
  Does the page work without JavaScript?
• Image presence
  Does the content make sense and is it readable without images (either background or foreground)?
• Assistive technology/disability
  Does the page work well in screen readers? Does the page work well without a mouse?

This is not a comprehensive list; and even so, you would not be able to accommodate every one of these variations in your design. But the more you can account for, the more user-friendly, robust and successful your website will be.

Additional reading:

Dear Print Designer Doing Web Design
This is a very “blue-collar” list coming from the perspective of an XHTML/CSS coder who’s job it is to implement designs.

The Way to the Web, Print Designers!
More often than not, the reflexive approach that I’ve seen print designers take on the Web is to treat it as a vehicle for print-based design practices: fixing type sizes, specifying typefaces, ignoring usability and expediency, and perhaps most notoriously making the assumption that, over time, users will come around to a print-focused way of consuming content.

The Development phase:

“You can repeat the steps of the development phase forever, but at some point you will have to abandon your quest for hypothetical perfection, go with your best guess, and proceed to the implementation phase.

1. Build
2. Test
3. Revise
4. Implement
5. Market
6. Maintain and Improve

As Apple CEO Steve Jobs famously observed, “Real artists ship.”  An architect who never gets hired to design any actual 3D buildings is call a “paper architect.”  It doesn’t matter how ingenious his blueprints are: unless he actually gets some buildings built, the history of architecture will not remember him.  By the same token, real designers implement.

It doesn’t matter how well the design succeeds in the hypothetical test environment of the development phase.  How a design weathers the implementation phase is the true test of its success.”

1. Predesign
2. Design
3. Develop
4. Implement

Skipping the predesign phase and diving straight into the design phase is like taking a hasty, blurry snapshot of a still life and then devoting weeks meticulously painting from that blurry snapshot.

…As Joe Jackson sang, “You can’t get what you want till you know what you want”

Above was a quote from the Curt Cloninger’s book “Hot-Wiring Your Creative Process“.  Below is another:

“At the end of the day, knowing grid systems, color theory, and the history of typography doesn’t necessarily make you a creative designer any more then knowing a pinch from a pint and how to operate a Cuisinart makes you a creative chef.”

Cloninger by the way, is also a lecturer of Multimedia Arts & Sciences at the University of North Carolina at Asheville

I’ll share more nuggets from his book as I progress beyond page 14.  That’s what my blog is for, right?  Referencing things from other people and producing nothing original?