A Few Thoughts on the TOC for The New Work of Composing

NWC-TOC-ScreenShot-forBlogI just finished some initial design work (in Adobe Flash) on the cover and table of contents for the edited collection I’m working on with Debra Journet and Cheryl Ball (The New Work of Composing). While there’s plenty for me to write about here, I’m going to limit myself to thinking-on-screen about a couple of the elements of the table of contents. On one hand, I’m excited to finally have a working version (in the sense of “in-progess,” and also in the sense of relatively “functional”), and I want to share it with people who read this blog. On another hand, I have a couple of questions, both technical and aesthetic, that I would love to get some feedback on.

First of all, I’ve made available a scrubbed version of the TOC (AnonymizedScatteredTOCforNWC) for you to download or access via your browser. My recommendation is for the browswer option, as one of the great weaknesses of Adobe Flash Content is that you have to jump through some security hoops in order to get it to play functionally in from your desktop. It really, really doesn’t like linking to external sites. So go ahead and take a look if you like. I’ve changed all of the chapter titles, authors, and themes to generic descriptors, as these elements are still in flux. What you CAN see, however, is how part of  the interface functions.

First, let me try to contextualize the file you can acess by offering a description of the cover and TOC interfaces as they will likely appear in the collection…

Opening The New Work of Composing, readers will first encounter a digital “cover.” Borrowing on traditional print conventions, the cover serves to orient the reader to various aspects of the collection such as the collection’s title, editors, and publisher attribution. Visually, the background image implies an historical transition between various composing technologies: handwriting, typewriting, and digital technologies. The cover also allow the reader to choose between two distinct strategies for navigating the collection’s chapters. We’ve designed two different interfaces which serve as tables of contents.

Readers who chose the “Scattered Table of Contents” link arrive at a table of contents organized as a  spatially-distributed field of chapters.  By clicking on one of the “theme” buttons within the “scattered” table of contents, readers can reorganize chapters in ways that more closely resemble their own interests. If a reader is particularly interested in conversations surrounding digital scholarship, they can click the “Digital Scholarship” button. The button will move into the field of chapters, and will be surrounded by each of the chapters directly related to that conversation. The chapters less relevant to that particular theme move away from the button and are partially grayed out. Clicking on a different theme button reorganizes the chapters in a similar fashion, but according to an entirely different theme.

Readers who chose the “Stacked Table of Contents” link arrive at a more familiar sort of table of contents. The “stacked” table of contents works in a fashion similar to the  “scattered” version, but it employs genre conventions borrowed from a more traditional linear organization of chapters. Clicking on one of the themes on the left side of the page produces a linear table of contents labeled with that theme. The collection’s chapter directly related to that conversation appear at the top of the table of contents, while the less-relevant chapters fall to the bottom of the list. Clicking on a different theme reorganizes the chapters according to a new theme.

We see these design decisions as taking advantage of the affordances of digital media to respond to some of the traditional challenges of editing collections of scholarly work. This design allows each chapter to remain an element of several different conversations simultaneously. We’ve offered readers the ability to customize various tables of contents according to their own preferences for interface design and scholarly interests. Furthermore, we offer readers multiple ways of understanding the ways each of these chapters participates in different disciplinary conversations.

The file I’ve offered here is a version of the scattered TOC. Here are some of my own thoughts about it.

First, and probably the most frustrating, is that the physical transitions between different themed versions of the TOC often get “hung up.” (It tends to happen a lot when you first open the text, but less-so the longer the page has been loaded.) The appropriate theme button must be pressed again to restart the transition. Frustrating. Wow. If I had hair long enough, I’d have pulled it out by now. I’ve tried so many different things. Anyone have any ideas on why this is happening? Any know of some great help sites for Adobe Flash?

Second, for various reasons, we’re thinking about continuing this design work in the Adobe AIR environment. Anyone familiar with this have any reaction to it? (My own interests in this direction have to do with making the collection portable to computers, rather than accessible via the internet. Each, of course, has it’s advantages. I have my reasons for this preference. I’ll blog about it soon.)

Third, right now the length of the transitions is set to 3 seconds. Any feedback on whether or not this seems a bit long? Short? Goldilocks?

Fourth, I’m ready to react to any other thoughts you might have. If you’ve got something relatively lengthy to say, and you’ve got your own blog, I encourage you to write up an entry and post it there. Then just link back here. Also, leave a note here linking back to your own blog. I like the idea of cross-blog-conversations.

That’s all for now. I’ll keep blogging about this more. Before I sign off, I also want to note that I’m working on this project with two great, great women. Cheryl and Debra. And out of respect for their privacy and their professionalism, I might decline or avoid commenting on certain questions or ideas. I’ll do my best, and as always, learn as I go. Please join me.

For now…

This article has 3 Comments

  1. Thanks for sharing the sample and your thoughts about the process. I think it’s a great concept and look forward to seeing the completed project. I’ll give a disclaimer: I know nothing about Flash so my comments are limited mainly to the graphic design components. I understand that we’re missing some context here (with the real titles, etc. sanitized) so I apologize in advance if I miss something obvious. Having no blog of my own, I’m posting the comments here.

    My thoughts really relate to issues of hierarchy. The first: Your theme buttons alternate width. I think, in this case, size matters. Smaller theme bubbles seem to imply something about the even-numbered themes (that they are less important). Perhaps that is intentional, but without the actual text, I can’t be sure.

    Second, as a theme button is chosen and the elements re-cluster, I have some questions. Does the relative proximity to the theme bubble imply anything (i.e. titles closer to the theme match more strongly to the theme). Also, the burgundy bubble that falls in from the top confuses me a bit. Without the actual text, I’m not sure what this element is… The most direct match? An editor’s introduction? (In either case, I think it ought to be closer to the theme bubble which doesn’t happen when elements reorganize to the right of the screen. Proximity implies connection.)

    Don’t know how hard it would be, but it might be interesting to incorporate a playful element in the ToC: the ability to click on the theme bubble and drag it around (the related themes follow/reorganize around it as it moves; theme bubble knocks things aside as it is moved around). Again, I don’t know Flash so you may want to shoot me for suggesting it!

    Anyway, that’s my two cents (worth exactly that). Great work!

  2. Wow, Vincent. Such generous comments. Thanks a bunch for your feedback. I see where you’re coming from with each of them, and I actually agree. It’s so hard to keep track of so many things while designing AND learning new techniques at the same time. Now that I’m further along “cutting my teeth” with Flash, I’ll be much more able to respond to observations like these. Thanks so much! (And yes, I think your idea at the end would be cool, but I don’t think it’s gonna be worth figuring out how to do it. You should work on it for a text of your own. I’d like to see it. And also, it was really nice to meet you at C&W this year. Hopefully, we’ll keep in touch until next year. Best, T.)

  3. hi ryan,

    thanks for sharing the toc to what is bound to be a fascinating site! i definitely enjoy the dynamics of the site – having the theme rearrange content. this is cutting edge work. i’ll be looking forward to reading more about your experience designing the site.

    my only two recommendations are 1) theme buttons might be more coherent if they appear at the top of the page or as a vertical menu, and 2) including a tag cloud might be another way to get the user to navigate through the site’s content.

    looks like you’re having a great summer!

    sipai

Leave a Reply

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

A Few Thoughts on the TOC for The New Work of Composing

NWC-TOC-ScreenShot-forBlogI just finished some initial design work (in Adobe Flash) on the cover and table of contents for the edited collection I’m working on with Debra Journet and Cheryl Ball (The New Work of Composing). While there’s plenty for me to write about here, I’m going to limit myself to thinking-on-screen about a couple of the elements of the table of contents. On one hand, I’m excited to finally have a working version (in the sense of “in-progess,” and also in the sense of relatively “functional”), and I want to share it with people who read this blog. On another hand, I have a couple of questions, both technical and aesthetic, that I would love to get some feedback on.

First of all, I’ve made available a scrubbed version of the TOC (AnonymizedScatteredTOCforNWC) for you to download or access via your browser. My recommendation is for the browswer option, as one of the great weaknesses of Adobe Flash Content is that you have to jump through some security hoops in order to get it to play functionally in from your desktop. It really, really doesn’t like linking to external sites. So go ahead and take a look if you like. I’ve changed all of the chapter titles, authors, and themes to generic descriptors, as these elements are still in flux. What you CAN see, however, is how part of  the interface functions.

First, let me try to contextualize the file you can acess by offering a description of the cover and TOC interfaces as they will likely appear in the collection…

Opening The New Work of Composing, readers will first encounter a digital “cover.” Borrowing on traditional print conventions, the cover serves to orient the reader to various aspects of the collection such as the collection’s title, editors, and publisher attribution. Visually, the background image implies an historical transition between various composing technologies: handwriting, typewriting, and digital technologies. The cover also allow the reader to choose between two distinct strategies for navigating the collection’s chapters. We’ve designed two different interfaces which serve as tables of contents.

Readers who chose the “Scattered Table of Contents” link arrive at a table of contents organized as a  spatially-distributed field of chapters.  By clicking on one of the “theme” buttons within the “scattered” table of contents, readers can reorganize chapters in ways that more closely resemble their own interests. If a reader is particularly interested in conversations surrounding digital scholarship, they can click the “Digital Scholarship” button. The button will move into the field of chapters, and will be surrounded by each of the chapters directly related to that conversation. The chapters less relevant to that particular theme move away from the button and are partially grayed out. Clicking on a different theme button reorganizes the chapters in a similar fashion, but according to an entirely different theme.

Readers who chose the “Stacked Table of Contents” link arrive at a more familiar sort of table of contents. The “stacked” table of contents works in a fashion similar to the  “scattered” version, but it employs genre conventions borrowed from a more traditional linear organization of chapters. Clicking on one of the themes on the left side of the page produces a linear table of contents labeled with that theme. The collection’s chapter directly related to that conversation appear at the top of the table of contents, while the less-relevant chapters fall to the bottom of the list. Clicking on a different theme reorganizes the chapters according to a new theme.

We see these design decisions as taking advantage of the affordances of digital media to respond to some of the traditional challenges of editing collections of scholarly work. This design allows each chapter to remain an element of several different conversations simultaneously. We’ve offered readers the ability to customize various tables of contents according to their own preferences for interface design and scholarly interests. Furthermore, we offer readers multiple ways of understanding the ways each of these chapters participates in different disciplinary conversations.

The file I’ve offered here is a version of the scattered TOC. Here are some of my own thoughts about it.

First, and probably the most frustrating, is that the physical transitions between different themed versions of the TOC often get “hung up.” (It tends to happen a lot when you first open the text, but less-so the longer the page has been loaded.) The appropriate theme button must be pressed again to restart the transition. Frustrating. Wow. If I had hair long enough, I’d have pulled it out by now. I’ve tried so many different things. Anyone have any ideas on why this is happening? Any know of some great help sites for Adobe Flash?

Second, for various reasons, we’re thinking about continuing this design work in the Adobe AIR environment. Anyone familiar with this have any reaction to it? (My own interests in this direction have to do with making the collection portable to computers, rather than accessible via the internet. Each, of course, has it’s advantages. I have my reasons for this preference. I’ll blog about it soon.)

Third, right now the length of the transitions is set to 3 seconds. Any feedback on whether or not this seems a bit long? Short? Goldilocks?

Fourth, I’m ready to react to any other thoughts you might have. If you’ve got something relatively lengthy to say, and you’ve got your own blog, I encourage you to write up an entry and post it there. Then just link back here. Also, leave a note here linking back to your own blog. I like the idea of cross-blog-conversations.

That’s all for now. I’ll keep blogging about this more. Before I sign off, I also want to note that I’m working on this project with two great, great women. Cheryl and Debra. And out of respect for their privacy and their professionalism, I might decline or avoid commenting on certain questions or ideas. I’ll do my best, and as always, learn as I go. Please join me.

For now…

This article has 3 Comments

  1. Thanks for sharing the sample and your thoughts about the process. I think it’s a great concept and look forward to seeing the completed project. I’ll give a disclaimer: I know nothing about Flash so my comments are limited mainly to the graphic design components. I understand that we’re missing some context here (with the real titles, etc. sanitized) so I apologize in advance if I miss something obvious. Having no blog of my own, I’m posting the comments here.

    My thoughts really relate to issues of hierarchy. The first: Your theme buttons alternate width. I think, in this case, size matters. Smaller theme bubbles seem to imply something about the even-numbered themes (that they are less important). Perhaps that is intentional, but without the actual text, I can’t be sure.

    Second, as a theme button is chosen and the elements re-cluster, I have some questions. Does the relative proximity to the theme bubble imply anything (i.e. titles closer to the theme match more strongly to the theme). Also, the burgundy bubble that falls in from the top confuses me a bit. Without the actual text, I’m not sure what this element is… The most direct match? An editor’s introduction? (In either case, I think it ought to be closer to the theme bubble which doesn’t happen when elements reorganize to the right of the screen. Proximity implies connection.)

    Don’t know how hard it would be, but it might be interesting to incorporate a playful element in the ToC: the ability to click on the theme bubble and drag it around (the related themes follow/reorganize around it as it moves; theme bubble knocks things aside as it is moved around). Again, I don’t know Flash so you may want to shoot me for suggesting it!

    Anyway, that’s my two cents (worth exactly that). Great work!

  2. Wow, Vincent. Such generous comments. Thanks a bunch for your feedback. I see where you’re coming from with each of them, and I actually agree. It’s so hard to keep track of so many things while designing AND learning new techniques at the same time. Now that I’m further along “cutting my teeth” with Flash, I’ll be much more able to respond to observations like these. Thanks so much! (And yes, I think your idea at the end would be cool, but I don’t think it’s gonna be worth figuring out how to do it. You should work on it for a text of your own. I’d like to see it. And also, it was really nice to meet you at C&W this year. Hopefully, we’ll keep in touch until next year. Best, T.)

  3. hi ryan,

    thanks for sharing the toc to what is bound to be a fascinating site! i definitely enjoy the dynamics of the site – having the theme rearrange content. this is cutting edge work. i’ll be looking forward to reading more about your experience designing the site.

    my only two recommendations are 1) theme buttons might be more coherent if they appear at the top of the page or as a vertical menu, and 2) including a tag cloud might be another way to get the user to navigate through the site’s content.

    looks like you’re having a great summer!

    sipai

Leave a Reply

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