Category Archives: guidelines

Mind the Attention Economy . . .

. . . Some Ideas for Effective Portfolio Pages

Imagine the following five visitors to the pages on your professional portfolio.

  1. The Viewer: This visitor only “looks” at the contents of the page–like a shopper at the bookstore looks at the cover of a book. On the landing page, he looks at the title and subtitle at of the site if any, then notices the overall layout and design of the page, and perhaps any widgets and navigational or design functions or features in the margins; if he doesn’t close the window/tab but goes to any other page, his attention span may increase–especially based on how well your site tries to convert this visitor into Type 2 below–but there’s no guarantee. For this visitor, the amount of content on the page he’s looking at and the number of pages/subpages on your site are like the thickness of a book he picks up or looks at without even taking it off the shelf. So, remember that especially if you rely on the quantity and quality of content alone–that is, if you don’t use the overall design/layout of the page to make a professional first impression, if you don’t chunk/organize the text so it’s inviting to read, utilize visual elements such as headings and vertical/horizontal space to make the content accessible, etc–this visitor may exit from whatever he’s looking at. Like it or not, this visitor is likely to represent 70-80% of total traffic on your portfolio.
  2. The Skipper: Especially if you make the site impressive and its content accessible, this visitor may spend a little more time and skip from one section/feature to another in order to get a sense of what those sections/features are about. She may decide to stop at certain parts and read a sentence or two more carefully, but don’t expect her to read full paragraphs.
  3. The Skimmer: Other than getting a sense of what the site is about from the above types of attention, and besides reading the headings/ subheadings if any, this visitor may also read the first lines of your paragraphs, shorter bullet points or visually highlighted texts. Their objective may not be to understand all of what you say but to get the main idea. Foregrounding is critical if you want to help this kind of visitor, who may represent 5-10% of visitors on your portfolio.
  4. The Scanner: Beyond looking around and getting a visual impression, and beyond skipping and skimming through the content of the page, this visitor may actually try to find specific information on the page. You can assume that this person is interested in you, but he will not read everything line by line, word by word.
  5. The Reader: Especially if you have designed the page and organized the content to engage the visitor, you can now imagine a minority of visitors who will go from #1 to 2 to 3 to 4 and be someone who finds the time and interest to read the all or most of the content of your page. But remember that even this person is more likely to read the content if the content is organized and accessible. Contrast, font type and size (though this is determined as much on the visitor’s side as on the writer/designer’s), and such other elements will also influence the visitor’s engagement with the page.

You can also imagine that the above are the levels of engagement through which the same visitor may go through on your site. But DO NOT assume that in the attention economy of the web, the default reader is one who will read what you write.

A lot of students who are used to writing for the teacher (who will not only read the entire text but also often read rough draft, provide comment, etc) tend to not realize what happens when the reader is a “visitor” on the web.

Often “good writers” in college are those who used to read (and often continue to read) a lot of fiction, and many of these writers seem to approach both academic writing and writing on the web as if they are established writers. They tend to play creative “tricks” on the reader, saving up the punch line for the end of paragraphs and the juiciest idea for the end of the essay–expecting readers to read all the details, to follow their train of thought, to hold on to disjointed pieces of information, to make the connection, etc. They seem to not realize that readers for what they write on the web are not the same as people who have decided to read a novel, found the time, and probably put away other things that would demand their attention.

So, instead, I tell students to imagine the following. Say it is 9pm and the person who is about to read your professional portfolio also has three projects whose deadlines are looming. She hasn’t had enough sleep for several days,  and she lacks the energy to focus on anything. Because she wants to be updated on people and projects, she has a Facebook app/tab on her computer. She also has the habit of occasionally picking her phone to see if she has new mail or text. And it is on that computer that the “visitor” of your professional portfolio may be reading what you write. This visitor may be a potential employer, or it could be someone who is trying to learn more about you.

Now, how much you write, what you include, and how you organize the information on your pages should depend on how you imagine readers like the above will engage with your writing.

Given the attention economy of the web, you should let the visitor know what your site is about (with a title and subtitle), directly speak to them where appropriate, provide visual cues, organize text and use vertical/horizontal space in order to make it highly accessible, foreground the main points, and use toggle or link to new pages as necessary. Do not ask/expect the visitor to visit your sub-pages if you can effectively present your information within the same page. Make sure that the visitor knows how they’ve been navigating the site. Provide references and links where appropriate. 

What I am Learning from the Project as a Teacher

In this post, I will be writing my own reflection about working with you, guiding you, and inspiring you (I believe) in this project. I have a lot to say about the idea, but I want to write more toward the end of the semester than early on. For now, let me just say that the blogfolio project draws on my personal interest and professional experiences working in the following areas: lessons, mistakes, and insights from exploring learning management systems and applications within then since I first started using them in mid 2000s; training on digital storytelling, digital media for teaching writing, and personal exploration of web and web 2.0 technologies as they develop; scholarship about multimodal composition in and across contexts; leadership for graduate students across a university for professional development (esp. professional networking) through strategic use of social media for participation (esp. from lurking to leading) in their professional worlds; and participation in and conversations about cross-border higher education and evolving educational technologies.

For now, let me make this post look better with some lorem ipsum text again.

Lorem ipsum dolor sit amet, id luctus eget vestibulum fusce consectetuer congue, donec pulvinar. Odio vehicula, et tellus quam nulla et elit sit, curabitur nam non, quis amet. Donec ut, felis pede sem magna mattis commodo pretium, erat a in tellus, lobortis varius. Nulla amet est. Nam odio, maecenas et magna sed metus ac volutpat, in orci parturient, congue enim quam placerat nam. Dolor nibh est aenean, pede nulla ultricies, vitae justo cursus curabitur dui, felis nec facilisi vel eu. Vitae sit scelerisque.

Natoque sed donec morbi ipsum, odio arcu, ut ipsum risus amet arcu in ipsum, vestibulum suscipit ultricies viverra donec. Lorem sed ante sed sit quisque lorem. Viverra sed nunc elit augue id aenean, senectus nulla, tincidunt sollicitudin minima ipsum dui sit. Maecenas pharetra posuere ut felis cursus quisque. In vitae sit, eget luctus eu vitae enim quisque. Sit vel hendrerit rerum imperdiet hymenaeos lobortis, vel harum lectus nisl pellentesque, blandit integer neque nulla, in neque condimentum tortor quis auctor, faucibus vehicula. Pharetra vestibulum ut vel ut, wisi nisl cras vitae vehicula, orci imperdiet justo nec turpis vel. Luctus metus aut et egestas. Condimentum est justo libero in, sed ut fermentum porta et. Eget arcu a justo tristique, nulla amet. Tortor id augue, a pede orci eu, facilisis et curabitur neque, natoque eros ultricies, in ut donec at.

Ultrices quis et nonummy sapiente ligula elementum, quis aenean amet amet incidunt, quis velit sit dui aliquam et est. Sagittis dictum, metus et viverra auctor velit, enim condimentum maecenas sagittis. Consectetuer sollicitudin dolor tristique quis orci, corporis pellentesque tortor. Elit nec velit nunc nibh, imperdiet magna eros, ac ut magnis ornare sed quam vehicula. Luctus ultrices ante condimentum deserunt, dui metus aliquet blandit ut nullam cras, suscipit in in elementum nunc. Fusce sunt lorem dolor duis condimentum, ut ut scelerisque tellus nec elit condimentum, at ullamcorper, praesent pellentesque non vitae habitant. Id nibh urna, arcu elit dictumst, tristique faucibus sit adipiscing. Purus nascetur aliquam cras leo elit. Elit non sed nulla integer mauris sodales, lorem in curabitur suscipit vestibulum luctus, praesent eget.

Elit est purus orci, ullamcorper lorem fames, ac maecenas diam urna fermentum orci, ultrices aenean quam velit curae sodales, massa erat tincidunt. Nostra eiusmod duis magna, nunc nullam scelerisque nulla, odio quis dolor, vitae erat in ut consectetuer pulvinar, mi morbi turpis. Imperdiet pellentesque enim mauris etiam, sed sed scelerisque dui anim aliquam, aut pede duis pellentesque, ultricies ornare laoreet, sagittis molestie vel. Ut ut, gravida risus consectetuer neque et faucibus luctus, pellentesque nisl mi lectus, lorem amet praesent eget ornare, euismod libero quisque in. Quis in ut, nihil ipsum pede malesuada massa ante, mauris commodo donec urna curabitur odio aenean, vel sit dignissim justo sit nec, metus aliquam in assumenda. In proin commodo a. Est porttitor eget nec posuere pulvinar mauris, volutpat dictum nibh nibh aliquam platea, pulvinar imperdiet nam nonummy turpis amet.