Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jordan
Instructure
Instructure

Guides Overview Page Redesign

Hello community comrades!

We've had a lot of great feedback about the Canvas Guides​ as we have transitioned them into this new community, from their original location at http://guides.instructure.com . While we have no current plans to retire the guides from their old location, we are still trying to optimize your experience while using the Canvas Guides within this new community.

Per numerous community requests, we have added index pages for each of the guides. w00t! These can be found in the Canvas Guides​ when you click on a guide link. A great new feature is that you now have an index/table of contents at the top of each guide index!

Our next step is to enhance the guides overview page to be more clean, and inviting. We also want to make sure we are providing the best links to the most important things that should be referenced in the guides. Now we need your help with the following:

    1. Please post before reading other comments Smiley Wink
    2. Share your overall favorite of the three mockups listed below
    3. Tell us what you like about the following three mockups
    4. Tell us what we are missing (what other quick links/buttons would be most helpful, if any?)
    5. Tell us what could be improved
    6. Feel free to take a screenshot and rearrange buttons/links/etc, or provide other visual references to present a different approach that you feel might be better

      1. Guides Overview - SAMPLE 1
      2. Guides Overview - SAMPLE 2
      3. Guides Overview - SAMPLE 3 

We hope to have the new Guides Overview page go live on Wednesday, July 15th, so hurry and share your feedback, and encourage others to chime in as well (via @mentioning them.)

Onward and Upward!

57 Replies
Stef_retired
Community Team
Community Team

This is beautiful work, Deactivated user​, and much appreciated! I like the clean lines and clear visual separation afforded by the design of Guides Overview - SAMPLE 2 .

And while I'm here, I'd like to offer a shout-out to erinhallmark​ and the entire documentation team for putting in the hard work that is and will continue to be needed to maintain two separate sets of guides. Thanks! Smiley Happy

hesspe
Community Champion

Hi Jordan,

Very nice.  I like three best, but not by a wide margin.

-Peter

mjennings
Advocate

My initial pass Is to like #2. However I am looking via iPhone and nothing displays in portrait mode and landscape doesn't let you punch in or out to see the whole thing. Attached are the screen shots of the vertical display.

I particularly access via mobile often when I am in an instructors office and they want to know how do do things. It is easy to pull up the guide and send them the link. Mathis gives them a reference for after I leave and helps get them into the community Smiley Happy.

image.jpgimage.jpgimage.jpg

ted_coopman
New Member

Hey Jordan,

I would go with #2, I think the left side navigation makes the most sense in terms of thematic consistency with the platform. I also like the headers for different sections, makes navigation faster.

My only suggestion is a mash-up for #2 and #1 where the guide sections would have headers but be stacked, like this:

                                  GUIDES BY ROLE (go with instructor, student, Admin, Observer order)

Screen Shot 2015-07-11 at 9.59.01 AM.png

                                      OTHER GUIDES

Screen Shot 2015-07-11 at 10.00.33 AM.png

MOBILE GUIDES

Screen Shot 2015-07-11 at 10.01.08 AM.png

-TED

DaleDrees
Community Champion

Love them all but Sample 2 really stood out to me! I like that they are categorized (1 is not) and the left hand navigation had more appeal to me over the last sample which is on the right and I like the smaller icons. 

kona
Community Coach
Community Coach

In general I like where you've gone with the guides page and think they are all a big improvement from the current page. I liked the general layout of #1, but thought it was a bit crunched and seemed a bit busy in the middle. I could see some people not realizing that the bottom row was all mobile, which I think is an important distinction to make. Yet, I definitely like the guides in the middle with supporting documents on each side. I wasn't a huge fan of #2, wasn't sold on grouping by fours or the big extra space between the Search box and the guides, but if we had to pick one #2 is probably my top pick. As for my recommendation for the layout? Bits and pieces of #1 & #2, similar to  @ted_coopman , see below:

GuidePage.png

RobDitto
Community Champion

I like both Sample 2 and Sample 3.  I have a slight preference for Sample 3 because it seems closer to the three-column design seen on other top-level Community pages.

john_morris
Community Member

Overall favorite is Guide 3... here's my critique of each:

  1. Guide 1 - generally like the content available, but organization does not visually separate the guides by role from other items.
  2. Guide 2 - the organization is better, color and grouping with headings help me get quickly to the role that is of interest to me (instructor). Separating Other from Mobile guides is also useful. I don't like the four items on the left (Guides FAQ, etc) because they appear to be more like the Welcome items on the right. My eye moves from left-to-right and the guides are the primary reason I would be coming to this page, so having the guide buttons appear in my view first is preferred.
  3. Guide 3 - if this view had smaller button (like 1 and 2), this option would be perfect!

What's missing... probably doesn't relate to this project, but I miss having quick access from the top Canvas menu (#1). I would like to be able to access inbox and activity stream with fewer clicks. Otherwise, all of my frequently accessed resources are available here in these three versions.

Suggestions for improvement... the top four ribbons on the page (1 - grey Canvas menu, 2 - bright red heading graphic, 3 - darker red menu bar and 4 - the Search Canvas Guides field) take up too much visual real-estate on the webpage. I have a large screen and have to keep my resolution at 110% to see pages comfortably (old eyes), even with the browser at full size, I have to scroll to see the bottom half of the web page. It seems like these items can be further condensed since they are so universal throughout Jive. How about cutting the header graphic and menu bar (#2 and #3) and the search field (#4) in half horizontally (shorten left to right), then align the two side-by-side and make them slightly narrower (top to bottom).

74066_pastedImage_1.png

Now that I have been able to look at these on a non-mobile device, I really like #2 but like that the others have the quick reference to supported browsers. I also like #1 but would think that some identification of "grouping" is needed as mentioned by  @ted_coopman ​ & @kona ​.

Another think that sticks out to me is in the Other Guides. Is there a reason for video guides to be blue when the rest are grey? It does make it stand out but visually it seems out of place. At least to me.

Lastly it seems odd that the "getting started" guide is in the middle of the guides (per example #1). It would seem that it should be nearer to the beginning.

Overall I really like the direction and think you guys are doing an amazing job. Keep being awesome!