Model of a usability test write-up

I wanted to give you a  little bit of an example of how you might write-up your usability test based on our class activity, so here’s my own reflections on the site design I brought in. This is just one way you might do it.


After conducting my usability test today, I realized the following things about my site need some work:

1) The navigation– not so much visually, but in terms of labels and groupings. There are too many buttons, one (at least) is too large compared to the others, and there is no home or contact tab (which are both things the nav really needs to include)

2) The subhead– with the pattern in the back– worked to draw user attention, but I’m not sure I like it. I like the font/design of the subhead, but I think the background of the page itself needs work, because…

3) my contrast, on screen, is okay, but when projected it was awful. If that is extrapolated over to other potential displays, there could be serious problems with the two shades of purple. The green/yellow seems fine, but… I just don’t know if  I actually like what that color says/does. I’m not sure I’m a neon green person.

Otherwise, it seems the site worked fairly well. There were nav labels that didn’t make sense to some of the users, but those were ones that are program specific (and hence meant for a specific audience). I might still change those, but that’s an audience concern to keep in mind for such work– it needs to work for the primary audience first before anything else.

There is also  too much text on the initial part of the page, but that is because I told a story in the blurb instead of just designing what I want to have there.

All in all, not a bad test. The site seemed fairly well received.

Answering some Questions

Hi, class,

We have a good set of questions from today, which means I’ll be writing a bit of a response here for you.

First, though, two things:

1)      Someone asked how the blog grading is going. I am one entry behind (well… it was due today), but due to that comment snafu, I have to make comments on the ones I graded previously, too. You should start to see those soon. I will get caught up ASAP.

2)      I didn’t write a blog response to the last set of questions because they were great, but they called for actual class topics. I’m going to incorporate those into the next few weeks after break (so don’t think I ignored them—I just didn’t want to try to give you really short answers when the topics needed attention)

And now… your questions and my answers, accurate and dependable from the Weather Channel.

Someone asked what I wanted for module 5. We haven’t gotten there yet, but we will talk about it soon.

Several of you asked about Module 4. By the time we’re done with it, you should be able to apply the new design to your WordPress blog and upload your model page to your webspace. But I would venture to say that no one is there… yet. Unless you’re ahead of the curve. My goal was for you to have enough resources to work over break if you wanted, but if you want to take the week off, you will be fine coming back with just the skills we have right now.

Someone asked how many pages you should have for your final project. That’s an “it depends” situation. You could, if your content isn’t technically “pages,” have just one page and a lot of content that operates in interesting ways. You could have a series of smaller pages that link to a larger one. You could have a few short pages and a few longer ones. It really all depends on your needs and your plan.  I know, crummy answer. Sorry. 😦

Someone asked about uploading stuff. I was going to teach you that the week after break, but we can do that briefly in class Wednesday. There are a few ways. The easiest—I think, because it’s the one that can’t mess up—is to have a full local copy on your computer then to upload either via FTP or via netfiles. Netfiles is easy in that it’s web-based, but it’s a little annoying because it only does like five files at a time. With an FTP client, you can drag folders.

Someone asked if you could look at page source code and then stick it in Dreamweaver. Yes, you can. You just copy/paste the source code from your browser, click on the “code” tab (or in the code window if you’re in split mode) and paste it in. Remember, though, that if there’s CSS or Java stuff happening, you won’t see that in DW, and if there’s a CSS on the site that the page you pulled references, you will have to get that style.css somehow for everything to look right (otherwise you’ll just have their content).

There were lots of questions about links. Linking in Dreamweaver is incredibly easy. You can link anything—anything that can be linked—by highlighting what you want to be the link (text, image, you can make a video a link but I don’t recommend it as sometimes the video player reacts to clicking and you get in a mess) and going into that link box down in the properties bar at the bottom and typing in the location. The linked thing doesn’t have to be an html doc—it can be anything that will display in a browser (so sound files, video, images, PDFs, txt files—you can link to a word .doc and it will open in Word if the person has it, to an Excel spreadsheet, to a PowerPoint, etc.) Just remember that if you want something to come up in a new window or tab you need to also set its property to blank (this is in the box below the link area—the pull-down. Choose _blank).

Someone asked about the color backgrounds of some of the built in sets of columns/tables in Dreamweaver. Those are actually made via CSS and not via tables (which is a better practice for the web in general, but I didn’t want to try to make you create one from scratch, so I started us with tables). Because those are CSS driven, you have to change the colors in the code. I can show you where to do that and how, but it’s tough to explain in text. Remind me to do that in class.

One of you asked how to make additional pages off the first page. That’s easy—you just make another page and link it. If you want to make a unified site with the same look throughout, that’s the joy of CSS that we’ll keep working with, and it’s also something DW can help you to do. We’ll get there after break. But adding pages is as easy as linking them.

Another of you asked about how to fix an object so it doesn’t move when people scroll. That is done via frames, but frames have gone out of fashion. CSS can now achieve the same effect, too.  Check this out.

Which brings me to my first little nugget o’ wisdom for the day that isn’t in response to anyone. CSS Newbie is a great place to go to learn about CSS. Take some time to look around. It will require you to tinker a bit, but if you pay close attention to the suggestions there, you can pull off some awesome looking stuff without having to be a CSS expert (though you will slowly become one through practice).

Someone asked about using different fonts on your website. This is one of those sad answer questions. You can use any font you want, but it needs to be on the user’s machine to display. Dreamweaver will only let you choose “system default” fonts, which means any font it lets you pick should be on any computer anywhere (they install with operating systems). If you want to use a specialized font, you have 2 options: 1) make sure it is free, then use it, but on your front page have a link and ask the user to install it to get the site’s full effect (not recommended but common). 2) make anything in that font an image file (much better for headings and titles, but REALLY annoying for body text).

Someone asked how to move objects on a page (like images). When I learned to code, it was impossible to do that without tables. You can now do it with CSS (using the same trick in the tab above for the no-scrolling nav bar—the position attribute), but it gets a little crazy because you have to then shape your text, too. I will work together a little mini-tutorial on how to do this for the Monday after break, but until then you can check out this link to get some sense of how it works.

Someone asked about moving a design over from GIMP. That would work the same way, basically, as porting a design over from Photoshop. It’s a long process, but it’s not bad. Check back in the readings for that tutorial.

One of you asked about adding text over an image in Photoshop. That’s really easy—you just grab the text tool, click where you want it, and insert your text. The text you type will become a layer, and you can then move it around as you wish (I’ll show you this in class).

And someone asked if you can crop photos in Dreamweaver. Sadly, you can’t. Adobe wants you to use all their software, so you have to do that in Photoshop. 🙂

And someone asked how to animate text. It really depends what kind of animation you want. We’ll look at some ways to get useful animation the week after break.

And that covers all your questions… I think.

See you all in class tomorrow!

-Phill

If only…

… I could think of something that we use regularly, as a part of our class experience, that uses CSS technology to acquire and present content in different ways.

Answering your exit-card questions

For some reason, I got home, sat at my desk, and needed to hear “Big Yellow Taxi” (the Counting Crows version, not the original). I think maybe it was the nostalgia of talking about the “old” WWW (and the pre-web). Such a strange thought that we live in a world where many people don’t remember life before the web. I feel like Morpheus when he’s explaining the Matrix to Neo… once there was no Facebook, no Google, no Amazon.com, no iTunes. *shakes a cane at his screen* Imagine what you’ll see in your lives. Oh… the places you’ll go! 🙂

I mentioned this at the end of class, but I don’t know if everyone was still in the room. You, as a group, did an EXCELLENT job with the presentations.  I was so pleased, and so impressed, with your work. I’m looking forward to reviewing your PowerPoints as I grade this weekend. Really nice job, all. You should be proud.

And now, your questions.

Let’s start with the big one (which came up more than once, and which I think the answer to is critical). Some of you asked if you should be worried because you don’t know anything (or only know a little bit) about coding.

Don’t worry. At all. Really. I know I keep mentioning that it might be a little overwhelming, but I’m mentioning that so that if you do feel overwhelmed, you know it is okay. The assignments are all built assuming you know little-if-anything about coding at this point. Many of them (like Module 2, or like me having you make a page for Module 1) are immersive moments and I know that for some of you that can be frustrating, but those are designed to give you a chance to look at or play with the technology without fearing what might happen. I know that sometimes I’m asking you to do stuff you barely know how to do. There’s a method to that madness, I promise. Trust me, in the end you’ll see that it made sense (and hopefully helped :)).

Don’t worry if sometimes things are a little confusing initially. I compare learning this sort of technology to playing video games (given my research, I would, right?): no one played Mario Brothers for the first time, without watching someone else, and knew to jump on the turtle’s head (I’ve seen so many people run right into the turtle, myself included). But you learn it fast by doing it. That’s sort of how this is meant to work.

At the same time, if it ever does feel like too much, just let me know and we can adjust. This class should be challenging, but not overwhelming or stress inducing. If it gets really stressful, something’s not going right and we’ll fix it.

Related to that, don’t let your term lists for Module 2 get too huge on you.I hesitate to be forceful about this (I know that can be frustrating as a student– I apologize), because if you wanted to do a list of like 30 terms, and it was what you felt would help you to learn, I’d have no problem with that. But at the same time, I don’t want you to feel as if you have to do that much definitional work. My hope is that everyone will contribute 3 or 4 good terms that when we pull them together will give you a great reference, but the whole idea of making you do this is to get you in the habit of looking stuff up. As I said in class, and I can’t stress this enough, a lot of the art of learning to code is looking at other people’s work and reverse engineering or flat-out “borrowing” pieces. And it’s never too early to get in the habit of doing some Google based research as you look at code.

Oh, and someone asked this after class, so if anyone else wondered: you will never, ever be asked in this class to work with just code. Any authoring we do as a class will be done with Dreamweaver (unless you chose to use a different, similar tool for some reason), and I won’t ever expect you to be able to do any sort of web work without references. There won’t be any sort of exam or quiz or killer assignment where you can’t use a WYSIWYG editor and any/all the references you feel you need. My goal is to teach you to create web content, and you’ll never be in a situation where you have to do that without tools and references. In fact, I want you to learn how to use those tools as a critical part of authoring/production.

There was also a split I see typically in post-project feedback: some people loved that there was plenty of freedom to choose websites and some people wished there had been more focus. I don’t think either of those approaches is more-or-less right (or that either desire is better or worse), so if you’re a person who would like more direction or more focus in the future, just talk to me and we can do that. I like it leave things as open as possible so that your work can do what you want it to do, but I know from my own learning experiences that sometimes I, too, need (or needed) someone to help me focus more. So we can do both, as is needed, with no problems. 🙂

Someone asked how iWeb differs from other coding tools. I will say, outright, that I like iWeb as a tool. I think it’s really useful for people who want an easy entry point to web work. I will also say this: it’s not good for anyone who has the time and resources to learn to use something better. Here’s why: it generates HTML code and CSS, like anything else would, but it has some special tags and code tricks that don’t play well with other systems.

For example, my girlfriend made a site in iWeb and uploaded it to her AFS space. It looked really nice, and it worked really well. But then she tried to edit it by hand to fix a little thing, and it corrupted the whole site (so badly that IT had to delete her AFS folder and rebuild it). So I would caution you about using iWeb, or MS Frontpage, unless you plan to always update the site with that same software because of some of the software-specific tricks both of them use. In theory, though, what those two programs kick out should be identical to what something like Dreamweaver would.

If you’d like software for your own computer that is “like” Dreamweaver but won’t cost you money, check out NVU. It’s clearly not as good as Dreamweaver (it’s freeware– and it works really well, but it’s not quite on-par with DW), but it is free. And I’ve never had anyone experience compatibility issues with it. You can also download a free Dreamweaver demo from Adobe (the site is down right now, but I’ll add a link later) that works for a month.You can download Photoshop and InDesign for a month as well (I think you can get the whole massive 8 gig CS4 Design Premium demo, actually, if you want to try all those tools).

And that covers all the questions from the cards. I was telling some of you after class that when there aren’t a lot of questions it either means things are going really well or things are going so bad people don’t know where to start.

Judging by your work so far, I’m going to guess things are going really well for each of you. 🙂

Let me know if you have other questions or concerns, and have a great weekend!

See you Monday!

-Phill

Hi, Class

There’s pretty much nothing here right now, but by the end of the day (hopefully) I will have all of your blogs listed in my blog list to the right. This will enable you to see what your classmates are saying.

Feel free to comment, but at least for now it’s not required.

-Phill

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!