I am really reaching out to the CDG for some support on this huge project. We initially wanted to make use of an all Flash site, but time and technical support is nill (I personally can't write custom actionscript). With that said, I've decided to go with an html (accessibility) based site with flash video and graphics embedded (as a header). Each tour stop will have it's own html page. Tour stops are based on general areas and NOT specific buildings. We can still link to specific buildings as a navigation option.
This is a generic wireframe that will have really rich graphics (fun, light-hearted, bright colors, trendy design). We really wanted to show off the Hi Def videos that are being shot, thus the large Flash designated area. The videos are shots of campus using a steady cam mount etc.
I would like to discuss content suggestions. For example, "1_intro_admissions_landmarks" page will include admissions building and popular landmarks. Content on this page would relate to UF Admissions and possibly some history about UF landmarks.
Another example, "2_academics" page will include popular Academic buildings (Medical, Law, Business, etc).
These are great questions Al. I'd tweak the last question a bit though. Maybe it might help to ask, "If you were taking someone on a tour of campus, what stops would you make? What would be your first stop?"
It might also help to get a hold of a program or guide the Cicerones use when they take people on tours of campus.
Below is the first comp for the Virtual Tour template skin design. Allow me to explain the purpose and/or function of the Virtual Tour so you can get a better idea of why we did what we did.
Purpose of the V.T.: 1. To merchandise the campus. 2. Illustrate the "friendliness and hospitality" of the folks on campus. 3. Show the beauty of campus using real life photos (not vector art, illustrations, or Photoshop effects). 4. Focus on the HiDef video, photo slideshow, interactive map Flash area. 5. A clean and minimal template design. We don't want the site design to 'take away' focus from the Flash content area. 6. Keep "text content" to a minimum. We don't want to overwhelm site visitors with to much information. Again, focus should be on the Flash area.
What you are looking at below is the Academics section (page) of the tour. Notice how simple and clean the page is. All the focus is on the Flash video area. A short intro animation will take place then the video will automatically begin to play. Users can also view a photo slideshow and interactive map. Users can then click the "Related Info" blue bar and jQuery will slide down to reveal related information.
This is what visitors will see once the blue "Related Information" nav bar is clicked. We plan on having a brief intro paragraph, Related Buildings list (click one of those links and lytebox will pop up with a photo and info), Related Resources (pertaining to the tour section), Student Quotes (makes the page more human in nature), nice big images of people and campus, more related info, and finally Tour Stops navigation (jump from stop to stop) and a link to the Campus Map.
Feedback is crucial b/c as of now there are only two people involved in this huge project. Thanks so much for your suggestions. I'm sure things will change over time and I'm perfectly fine with all that.
Thanks for putting all of this information together.
I have looked over it briefly and I'll make time to look more closely later this week or early next.
My first impression is that you've put a very elegant and classic design together. Simplicity like that is hard to do well. Great job!
I think I would like to see one or two lines below the flash and above the related information. If someone is on a page, there's no context to orient them to what they are looking at, what to expect or why its important. Maybe the label is just the tour stop title and a tag line (e. g. UF Academics, where learning and teaching meet... or maybe something from the dialog)
Christine Schoaff Past President, Academic and Professional Assembly Director, UF Web Administration
Al, Could the transparency be made less on the College lists at the bottom of the page? In the first column it is fine, but the background photo behind the second column has a lot of detail behind the text, and I'm wondering if there isn't enough contrast. We can make it out, but I'm wondering if older users will be able to make it out.
I love the layout, but the "madness" far outstrips it. Those are *amazing*. I understand the conservative look from an academic standing, but I'm sad that there can't be more personality to it. Afterall, people come here, in part, for the personality of UF.
Al, I think that if you take in the suggestions from the groups yesterday (adding a call to action button, pulling the Tour Stops and Campus Maps out of the J Query and placing it underneath the movie, etc), this is ready for prime-time (providing TPTB approve moving forward).
In the meeting Monday, I mentioned the 960 page width is now becoming the norm in most websites. Here's a link based on this theory, they offer grids you can download to aid in the creation of 960px layouts.
All, I'd like to present the rough mock up of the V.T. site project (almost in it's entirety). I would really appreciate your feedback and suggestions. I've incorporated a few of your suggestions, but I'm still having a hard time wrapping my head around the "call to action" button. Can you be more specific as to what "calls to action" we should incorporate and where to put them?
None of the content (text) is original (I am not a writer). It's taken from several existing UF sites... UF home page Housing Reitz Union Gatorzone etc
My main concern is the content and/or any additional features ya'll may think of. The videos were produced by Gville TV and are out of my hands.
In response to Al's email to provide feedback for the Virtual Tour mockup, here are my thoughts:
Looks great. Have you tested this in IE? (Yes, I not only use a PC, but I also use IE.) I had some technical difficulties watching a few of the videos. The libraries video in particular was very choppy. All of the videos took a while to load. When you expand the "more information" bar, the font is huge. But everything looks really clean.
I wasn't using the arrows at the top to move through the videos; I used the links at the bottom. And I found that I followed the links on the left column and then the links on the right column. So I ended up watching the videos out of order. Of course, I might be the only one who goes through the links that way. But you might want to survey some people to see which direction you want to run the video links.
Great job -- I'm sure this has been quite a project.
I'd suggest putting the call to action at the bottom right -perhaps moving the Campus Map to a middle column and making it three column across the bottom. Just a button about wanting to apply and linking to the admissions site.
FYI, I asked my intern to look it over, as he had not seen it before. Everyone worked intuitively for him except for the bull pull-down tab - he didn't even notice it as an option. Just something to look for from other user testing.
I think the interface looks great - clean, polished and it really allows the videos to take center stage.
I agree with jstevens' suggestion of breaking the bottom section into three columns (while maintaining some of that nice whitespace) and putting a link to admissions at the bottom right. You could also put a link below the Campus Map link, styled in a similar way with a similar blurb below it (e.g. "Want to know more about applying? Visit UF Admissions") I'd also suggest that when the "related information" pulldown bar is pulled down, to have an instance of it stay directly below the video, so the user doesn't have to scroll all the way down to collapse that area.
I viewed this in FF 3.5.3 and the videos are *extremely* choppy, with audio dropping out occasionally. I'd say unwatchable for the average visitor (maybe this is something that will be resolved when it's on the live server?) The aspect ratios of the video and of your embedded player appear to be different - the videos seem a little horizontally stretched.
First off, I think the design looks sexy as hell. Great work. Here is a buncha feedback (I know the videos aren't under your control but ill blab anyway):
* The videos all look squished * No girls in the videos? * I'd make the "next/previous tourstop" text larger * Anyway to crop the video properly so there isnt a black top/bottom border? * Anyway to also offer a low-res version? Using Volta's internet connection the videos took forever to load, kept buffering every few seconds. * I think the "Related Information" is too important to hide behind a scroll-out. I'd show it by default * I'd move the tour stop headline like "Student Life" above the video, so you know what page you are on. * i'd adjust the location of the links: http://screencast.com/t/mLNdHk45O * I think it'd be nice to have the tourstops on the top/left in a list, so i could see where ive been and where im going next easily
as always, take what you want and ignore the rest :)