Posts Tagged ‘ Blog ideas ’

Blog evaluation change proposal

I mentioned in an email altering your blog evaluation criteria to provide more incentives to read and comment on class mates’ blog posts. Do remember that this already is a requirement for class participation points.

I don’t think one solution will work for all, so I would like to propose that each one of you customize your blog evaluation form to suit your needs.

Here’s how it could work:

Read and then write your own blog post about what you read on class mates’ blogs. Write by posting a link and a short commentary, or re-blog the comments you posted, or write a post responding to a colleague’s post (a longer comment deserves its own blog post).

Count up to 4 such blog posts about class mates’ blogs into whatever categories you are not doing very well in.

So, do a self-evaluation of your blog, then decide what works best for you. Would this work for you? Please write other ideas and questions in the comments below.

Advertisements

Class notes: UI design principles

Tonight in class we went through the book Designing with the Mind in Mind. The book explains the human perception and psychology mechanisms that underlie many popular UI design principles.

I know it is a lot of information to process in a short amount of time. It is OK if you don’t feel you have really learned or can remember it all. My intention is to raise your awareness about these issues enough that you know that they exist and can search for more information when you need it. Also, keep the book. ¬†You will refer to it often.

Please help each other further learn and remember these principles, by blogging about them and showing examples. They really are everywhere. Take a look at the screen shot of the WordPress dashboard below. I have circled some issues to get your attention – what principles from the book do you recognize there?

Click image to enlarge:

Screenshot 10:9:13 10:15 PM

Suggestions for first blog posts

You might be wondering what to blog about now that the semester has barely started. Here are some ideas:

  • Goals and intentions for the class – what do you hope to accomplish? What do you hope to get out of this experience? How do you plan to work?
  • Goals and intentions for your blog – similar, but just for the blog.
  • Excitement/apprehension – what are you excited about regarding this class? What are you apprehensive about?
  • Blog recommendations – are you already reading blogs that are relevant to class topics? If so, write one or more blog posts and recommend those blogs to classmates. Explain what is the focus of the blog, and what kinds of information we can find there.

Ideas about Breakthrough Ideas

When I suggested the Breakthrough Ideas category for your blogs, I thought you would discover and reflect on what the interfaces of the future may look like. Things that already exist, but that we do not address in this class, because we are too busy learning the fundamentals.

To learn about breakthrough ideas, browse the MIT website. Search for information about things such as:

  • neural interfaces
  • natural user interfaces (NUI)
  • wearable computing
  • ubiquitous computing
  • virtual reality
  • retina displays

Here is a post I wrote a while back about a Google Talk on natural user interfaces. It is an example of what a breakthrough idea post may look like.

And below is a video of a breakthrough idea from Apple. It is 25 years old, but still counts as breakthrough. (HT to my student Xin in TECH 621). See what Siri was envisioned to look like back then, and note how many things have been accomplished and how far we still have to go. Amazing.

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?

Blog post ideas: Design & Usability Principles part 1 of 2

These are not really class notes – they parallel the class notes with ideas of things you could blog about for this class. Look back here whenever you need inspiration.

General Principles:

  • Examples and applications of any one or combination of ideas and principles you heard today
  • Are Cooper’s and Krug’s (and Nielsen’s) principles complementary or contradictory? How so?
  • Make choices mindless – be aware of how many tiny choices you make every day as you use computers. Notice when you think about those choices – and how you think about them. If you do sit and think about your choice, this means it’s not mindless, therefore, not well designed. If it’s so quick and natural that you fly through it, it may indicate a good design.
  • Rude, inconsiderate behavior – examples abound. Provide examples and think about how you would redesign them.
  • Error messages – I challenge you to find examples of good, useful, and helpful error messages (unlike the one below)

    click to enlarge

  • Provide an example of a system that predicts your behavior – accurately and/or inaccurately. Explain how it does so, and whether the implementation is successful or not.

Visual Interface Design & Design for Scanning

  • Analyze the mood or the visceral response a specific software interface triggers. What about its visual design makes you feel that way?
  • Try to isolate a building block of visual interface design – for example, shape, or value (color intensity). Examine how it is used in an interface to get attention and communicate function.
  • Learn to notice grids in designs. Whenever you look at a Web page, count the columns. Note what the smallest grid unit is and how it is used, both for vertical and horizontal alignment.
  • Learn to notice and blog about visual hierarchy. Close your eyes. Look at the screen. Note where your eyes go first, second, third. Then, examine what about the design made your eyes move on the page in that order.

Metaphors & Idioms

  • Metaphors are great fall-backs for good/bad design examples. Wherever you look, if you learn to notice them, there are metaphors. Most of them come with both advantages and disadvantages. Note them. Remember that metaphors work because of the similarities between two concepts. If the two concepts are not similar enough, the metaphor breaks down – or it obscures the parts that are different. There are some examples of sites with CRAZY metaphors out there – find them and post some on your blog!
  • Good idioms are so intuitive and transparent that we’re not even aware of them. Find examples of idiomatic design elements. Learn to see them. Blog your examples.
  • Write a review of the new gestures in Lion OSX in light of the inverted pyramid Jing presented when thinking about idioms. Are the new gestures good idioms? How many atomic elements are there? How can actions be achieved by combining atomic elements?
  • Notice and blog about how affordances are communicated through design. When you see a certain object, how do you know what it can do? How can you infer that from the design? If not from the design, then how do you know what it can do? Similarly, notice ambiguity in communicating affordances – Examples when you see a button or a design item and you have no idea what it can do. For example, the floppy disk icon communicates the affordance “Save” – but how does that make sense to someone who has never seen a floppy disk?!

Accessibility

  • A common exercise is to try to navigate a site without a mouse – only with the keyboard. See how easy/difficult it is and what functions are/are not accessible
  • Note the use of color and contrast on interfaces.
  • Play around with this screen reader simulation (or the Web Anywhere simulation) to see what it’s like to get things done online if you’re hearing impaired. What was the experience like?

Resources

Homepage

  • Examine a homepage (or more) and analyze how it answers the following questions: What is this site? What can I do here? Where should I start? Did the homepage answer all these questions at a quick glance? How was it designed in order to do that?
  • Homepages often have to have a lot of content and features, and accommodate several audiences. Pick a homepage and note how it accommodates all that complexity.
  • How can homepages accommodate all this complexity on small mobile screens?
  • Tag lines are more a matter of marketing and PR, but if they do not make sense to users, they will, obviously, fail. Examine and critique a few tag lines and evaluate their efficiency.
  • There is a design trend, pioneered by Google and Apple, that emphasizes minimalist design. How does that work for homepages?

Navigation

  • Pick any random, small page – somewhere deep into a website. Analyze how it answers the following questions: Where am I relative to the Web as a whole? Where am I relative to this site?
  • Pick any Web page and see how it answers these questions: Where am I? Where have I been? Where can I go from here?
  • Analyze a site’s navigation solution and see how it supports both leisurely browsing and focused search.
  • Remember the concept of “persistent navigation” and note how it’s implemented on various sites.
  • Note and critique how breadcrumb trails are implemented on various sites.