Archive for the ‘ Resources ’ Category

Reading for Oct. 23 – Wireframe and prototype resources

Please read the book chapter on Bb and review these online resources before class and, instead of several reading worksheets, take notes that answer the following questions:

  • what is the difference between sketches, wireframes, mockups and prototypes?
  • what is the utility of each one of these? when are they used in the UCD process and why?
  • what are some useful tools for creating wireframes, mockups and prototypes?

Bring these notes to class, printed out, just like usual. You need only ONE set of reading notes for all the readings and resources.

  1. Blog post showing you the  process from wireframing on.
  2. Class blog post for CGT 256.
  3. Tools and resources for wireframes, mockups, and prototypes – reviews from Cooper, UX Movement, and UX Mag, and my collections for this class.

We have Axure in one of the labs in Knoy – 316B, I think – if not, it is 316A (316A confirmed) and you each will receive an invitation to create a Balsamiq account. You can also try Fluid UI and/or InVision for mobile apps. Most online wireframing tools have free account options.

Advertisements

Another reading worksheet

I posted this on BB > Readings. It is a worksheet that breaks down the predictable structure of empirical research articles. It helps students read empirical research faster and understand them better.

It is not required for use in class, but many students find it a very helpful aid in their reading, so I wanted to share it with you, too.

Do you feel the worksheets and guided reading questions help you understand the readings better? Have you used this (or similar) worksheets in the past? Have they helped? How?

What tips do you have for reading efficiently and effectively (fast, while getting a good understanding of the material)?

Please post a comment or interact with this post somehow (rate, like). I want to see if people read it, and when. Thank you!

Persona reports

You can find all persona reports on Bb > Useful Resources > UR2 Resources: Identity Management

Please browse through all reports. Note:

  • What do you like most?
  • What do you wish you had done differently?
  • What do you want to keep in mind for future assignments or for future work with personas?

Sketching and Wireframing – links and resources

Why it’s important to sketch before you wireframe.

Wireframing in Powerpoint.

Top 3 wireframing tools (all offer free trials).

10 essential toolkits for iPad wireframing

Konigi wireframe stencils

Konigi graph paper for sketching

iPhone graph paper for sketching (pdf)

Balsamiq – for sketching and wireframing (30 day free trial)

Fluid UI – for mobile wireframing and prototyping

[Update] Here is another list of similar resources compiled by Suren.

[Another update] Here is a link to a blog post with the UX designer’s toolbox recommended by Katie.

UX blogs

Here is a screen shot from my Google Reader with the UX blogs I follow on a regular basis. If you are serious about this field, or just curious, you should follow them, too. Smashing Magazine is another good resource that’s not here.

3 reasons why you should subscribe:

  1. The posts on all these blogs are very useful and informative and let you know what the hot issues are in the profession.
  2. They enable you to learn who the people are who are recognized in this field, and if you comment, you can…
  3. Begin establishing relationships with these people. Most of these blog authors are also on Twitter, so you can network with them and learn from them there, too.

What UX or HCI blogs are in your RSS reader right now that you would recommend to others? Please feel free to write a similar post with a screenshot of the blogs you subscribe to.

P.S.

Consider the difference between how the top paragraph was initially written and what it is like now. What’s the difference? Why did I make the change?

Here is a screen shot from my Google Reader with the UX blogs I follow on a regular basis. If you are serious about this field, or just curious, you should follow them, too. Smashing Magazine is another good resource that’s not here. The posts on all these blogs are very useful and informative and let you know what the hot issues are in the profession. They enable you to learn who the people are who are recognized in this field, and if you comment, you can begin establishing relationships with these people. Most of these blog authors are also on Twitter, so you can network with them and learn from them there, too.

Some free wireframing and prototyping tools and resources

Let’s start with the very basics:

  • First, learn to see wireframes. Bookmarklet Wirify will show you the wireframe of any page you’re on (works great with Firefox)

More similar tools here, all of them free.

What are your favorite free tools for wireframing and prototyping?

Animated transitions

Via Konigi:

Check out this project, Meaningful Transitions – it is the result of an undergraduate student’s research about integrating meaningful animated transitions in static Web interfaces. I cannot read German well enough to understand the methods he used to validate this research, Meaningful Transitions Websitebut I think it is quite interesting.

The basic argument is that meaningful animated transitions can ease users’ cognitive loads as they perform certain actions – e.g. scrolling, or orienting oneself on a page. I do believe that. As hated as animated transitions are in PowerPoint, I believe that if used well (if they are meaningful) they can actually help people understand concepts better.

Given the research topic, the website is not as clear and easy to use as I would expect. Still, it is worth taking a look at the specific transitions he created (patterns).

Here’s a blog post idea for you: Contact this student and interview him for your blog. Ask about his methods, how he came up with these ideas, and what research he did to validate them. I was just about to do this myself, but then, I though I’d let you have the idea if you’d like it. If you do, please let us know in the blog comments. We don’t want 10 people emailing him the same questions!!!

But, what do you think? Is this a good idea? Is it threatening to bring dreaded PowerPoint bells and whistles (even worse, FLASH!) to otherwise perfectly fine interfaces? Would seeing the same animation day after day in a piece of software be a waste of time and an annoyance? When would such transitions be useful, and for what kinds of products/contexts?