Interactive HyperLocal News Mockup

Balsamiq is a great tool for quickly mocking up an interface, and you can even add interactivity, and my embedding a PDF export, you can have an interactive mockup running in your browser.

Try clicking on the map pins in the PDF below:

Great 404 page design from balsamiq

2013 Mac Book Pro Reset button is pressed a bit too easily ...

So in what may hopefully be an ongoing series of design bloopers here's something from my 2013 Mac Book Pro.  The reset button was previously completely separate from the keyboard, but has now been placed just above the delete key, so that I accidentally hit it a few times a week.

It does have a confirmation dialog to prevent me immediately shutting down my computer when I'm typing, but it seems like a bit of a hack.  I guess there must be some strong technical reason for having changed this around, but I'm not seeing much in the way of improvement in terms of user experience here ...

This seems to fit well with some of Nielsen's usability heuristics.  It does well in terms of "Help users recognize, diagnose, and recover from errors", but perhaps not so well in terms of "Error Prevention"

Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

They've got the confirmation action, but better to design to avoid error occurring in the first place, and Raskin hates confirmation dialogs ... It's particularly odd since the previous mac book pros were designed such that this was never an issue - the reset button was out of reach in a silvered portion of the body of the MBP in the top right, and was set into the frame so that it was difficult to press accidentally ...

How NOT to do email notifications

So in an effort to collect user interface (UI) bloopers, here's a pet peeve of mine.  Google Plus notifications.  This is how they look in the subject line view of Thunderbird.  Look at this awful replication of information.  The From field is telling me who it is from and that it's via Google+.  The last thing I want is the same information in the subject line.

I don't think anyone could argue (in the context of this interface) that the subject line should be anything other than something about the contents of the post - the first sentence perhaps?  The title of an associated URL that was being shared.  Anything to let me know something more about what I might discover when I click through.

Perhaps the problem is that the Google plus notification team hasn't optimized for Thunderbird?  Fair enough - I can see Thunderbird users as a bit of a niche group, perhaps they are thinking in terms of the gmail interface:

It would appear not - exactly the same problem in gmail.  Although to be fair when I haven't searched for Google+ the faded out text on the right hand side does have a small amount of text from the actual post.  Although if we are on search in gmail, why isn't there a sensible way for me to get back to the full inbox other than clicking inbox after a search - if I delete the search term in the box and press search shouldn't I go back to my full inbox?

Anyway maybe these Google plus notifications are designed for viewing on a mobile device?  This is what it looks like on my Nexus:

Come on Google - this is really simple stuff no?  I know I couldn't pass your complex engineering exam, but when are you going to hire me to sort out these UI issues for you ...

Harrow Local Support StakeHolders

Image by Jurgen Appelo thru CC BY 2.0

One of my continuing posts related to the Systems Analysis / Software Engineering class I'm teaching this semester.  Here's a list of stakeholders for a "Harrow Local Support" website/directory concept I've been working on with Voluntary Action Harrow (VAH) an umbrella group for local charities and non-profits.

Harrow residents

• Looking for support
• Looking for volunteering opportunities

Harrow Charities

• Trustees - who oversee the actions of a charities
• Administrators - who run the charity
• Staff - who work for the charity
• Volunteers - who devote their time/resources for free

Harrow Non-profits (groups without charitable status, and also ???? unclear if there is a legal definition)

• Administrators
• Staff
• Volunteers

Voluntary Action Harrow (VAH)

• Administrator
• Staff
• Volunteers

Other organizations

• Harrow Businesses
• Harrow Council

Stakeholders sounds a bit management faddish, but I guess it's a reasonable term that distinguishes itself from alternatives such as "people" and "users", which can lead one down the path of imagining a queue of people lining up to use whatever system one happens to create.  Realizing that everyone is busy playing parts and roles in all sorts of other groups is important, and stakeholders captures the idea that individuals (and perhaps organizations) will have varying degrees of "stake" in whatever project you are developing.

Eternal Independent Learning (using blogs and peer review)

Image by Wesley Fryer thru CC BY-SA

I was very impressed with the Peer Review framework Scott Klemmer had in his Coursera HCI classes last year.  I'm implementing simpler versions of that in my own online classes, but with all the student work submitted and reviewed through student blogs (I recommend, but don't require, using Google's http://blogger.com ).

https://sites.google.com/site/hpumobilespring2013/blogs

I really like the blogging in the wild approach since it ensures that when someone is commenting on their peer's work, they can (at least in principle) see the full history of the project being worked on by their peer, and if they are interested in can keep coming back to it, offer to collaborate etc.

I think this at least partially addresses some issues I encountered in the Coursera peer review system such as not being able to see the broader project context of peer work, and not being able to follow the development of peer projects, however it raises a number of new issues:

1) Are students happy with blogging in "public"?

2) How to scaffold the peer review process in public blogs

Addressing point 1) I explain to all my students that they can set the blogger to:

a) Full Public - appears in Google search results

b) Accessible to all by link

c) Private

And I explain that even with option b that in principle anyone can come through my public class site and find their blog unless it is explicitly set to private; but I encourage everyone to take the b) option.  I'm a bit of a sharing nut :-)  And I hope all my students can turn their projects into part of their professional portfolio.

Regarding point 2) I find myself equivocating on how much structure should be imposed on students both for assignments and peer review.  Too strong a structure and some student creativity is inhibited, too loose a structure and perhaps some students are left unsure how to proceed; not to mention the added concerns of encourage positive helpful feedback during pair review.

Any which way it makes me imagine an "Eternal Independent Learning" system in which individuals would be working on projects, posting them to their blogs and receiving feedback from each other.  Clearly this is what actually happens in the real blogosphere itself to some extent :-) But I'm imagining a little bit of scaffolding using the blogger API could create a sort of queue of people waiting for feedback on their projects and do something like http://www.fivesecondtest.com/ except on a larger scale so that arbitrary project components (rather than just landing pages) could gain reciprocal feedback, while also allowing individuals to establish mutually supportative relationships with each other.

One could even go further to imagine a StackOverflow/Quora type points system that gave individuals a score based on their contributions to other blogs, and the positive feedback they attract on their own blogs, peer's setting each other challenges etc. 

Comedy Faqbot Project

Image from Public Domain

So this is the final of three project brainstorming posts related to the Systems Analysis / Software Engineering class I'm teaching this semester.  I've been wrestling with a chatbot that can answer some useful questions about online classes (and tell a few jokes) for some time.  This project is also bundled up with my student work assignment tracker.

Problem Description:

Courses that are run year after year build up a set of previously answered questions that it would be great if current students and alumni (and instructors) had access to.  One form is just to display these in static text, but another form would be to provide a chatbot interface that could participate in IM discussions.  Boredom is the mind killer when it comes to learning, a little bit of quality comedy might help?

System Capabilities:

• Answer simple questions relating to an online course
• Provide students with information about which assignments they have completed
• Tell the occasional joke, riffing off what the student is asking

Benefits

• Handle much larger number of students for a single instructor
• Provide an alternative form of access to a large repository of information
• Provide some occasional light relief

Prototype open sourced here:

https://github.com/tansaku/faqbot

HyperLocal News Project

So this is the second of three project brainstorming posts related to the Systems Analysis / Software Engineering class I'm teaching this semester.  I've been pondering about a hyperlocal news system for a number of years: http://linklens.blogspot.co.uk/search?q=maps and I guess I should be contacting a local news organization like the Harrow Observer to see if I can't get some geocoded local news data from them

Problem Description:

Local residents may not know what is going on around them.  They may have a general idea from newspapers, tv news etc., but there is something about a map overlay to really highlight where things are happening nearby

System Capabilities:

• Provide a list of news items on a map of the local area
• Support discussion of those news items by local residents

Benefits

• Increased community engagement in local stories
• Promote local news outlets

Harrow Local Support Project

So this is the first of three project brainstorming posts related to the Systems Analysis / Software Engineering class I'm teaching this semester.  I've been volunteering with Voluntary Action Harrow for a few months now, and we are working on an idea for a website/directory that is tentatively titled "Harrow Local Support".  Here's a description in the "System Vision Format" from Satzinger et al's "System Design and Analysis in Changing World"

Problem Description:

Local residents may have trouble finding support services when loved ones fall ill, pass away, lose work or encounter any kind of challenge that is not affordably addressed by for-profit organizations.  Charities and non-profits providing support services in the local area have difficulty making local residents aware of their activities or even discovering the existence of each other.  Voluntary Action Harrow would like to have some sort of directory service that would allow both local residents and local non-profits to easily find one another

System Capabilities:

• A directory of local support services that is easily searchable and discoverable by non-technical users
• Ability for local support services to update their contact details 
• Allow Voluntary Action Harrow to promote the services they offer to non-profits, and the events they organize
• Provide a controllable web presence for small charities that can't easily create their own websites.

Benefits

• Increase VAH profile
• Support local charities, community and residents

Prototype site here:

https://sites.google.com/site/hlsbeta123123123123/

Chrome tough on http in https - how to get round it

Some students and myself have noticed our dropbox hosted html files failing in Chrome when trying to load bits of JavaScript recently ("The page at XYZ ran insecure content from ABC").  The problem seems to be that your standard dropbox public URL link defaults to secure http, i.e. https:// ... whereas the file that you might have dropped in your dropbox Public folder might be trying to pull in some CSS and JavaScript files over simple unsecure http.  On Firefox no problem, but on Chrome this is now flagged as insecure, the files are not pulled in and you get a lack of CSS and JavaScript errors due to libraries not being loaded.

Here's an example of this failure:

https://dl.dropbox.com/u/13196858/Spr2013Mobile/jQueryMobile/index.html

The quick fix (if you can't switch all the CSS and JavaScript libraries to https), is to remove the "s" from the http, and download insecurely from dropbox. Not that this is a big deal for prototyping - it isn't, but confusing since the right click grab of the public dropbox url defaults to https ...

http://dl.dropbox.com/u/13196858/Spr2013Mobile/jQueryMobile/index.html

Or alternately, just pull all the CSS and JavaScript libraries into dropbox itself, where they will all be hosted over https, and of course you'll have the added benefit of not having to worry about the remote CDN (content delivery networks) going down.

Anyhow, this just seems to be Chrome at the moment, and doesn't affect things like safari on iOS etc. allowing us to continue to get web apps on mobile very very fast!

Dropbox Drops Public - effect on Online Students

So it turns out the Dropbox removed the Public folder for new users a few months back.  This actually threw me and a lot of my students - for several months I have been continuing to tell my students to use their public dropbox folders, and it has only just come to light that they didn't have one unless they created it explicitly.   All good now, but it's a great example of poor visibility.  Not dropbox's fault as such.  Just something that's a problem with lots of online interactions - you can't see what the other person is looking at and you tend to assume that they see what you see.  If you've got a Public folder you assume others have.  You can say, well the students should tell you, but students are often overwhelmed and tend to assume, erroneously, that the instructor knows what they are talking about ... :-)

The Dropbox Public folder can still be created by any user who wants one and they are really really useful for quick testing of webpages, sharing images and so forth.  So useful in fact I wish I could adjust the Ctrl-Shift-4 screen capture on OSX so that any screen capture would be immediately moved to my public dropbox folder and then the public url for it be added to my clipboard, so that I could go Ctrl-Shift-4 and then Ctrl-V into an IM like Skype text chat to immediately share what I am seeing with whoever I happen to be chatting to at the time.

What's interesting to me is how long it's taken to work out that this was a problem.  The cut and paste screen shots feature that I mention above has been implemented in Linux by one of my past students, although it worked specifically with his own server and not with Dropbox.  It's a potentially great solution to the problem of poor visibility when working with others online.  Screen share via Skype or Google Groups is a great way to debug these issues, but it takes time to setup and the tendency is not to go there unless an obviously serious problem comes up.

I've noticed myself starting to prefer Skype text chat recently over email recently.  Some people have laughed about that, "yeah right, because starting up an email client is so hard", however I think there is something important there.  It's like being in the same room with someone and just being able to turn around and talk to them, versus needing to pick up the phone to call them.  To send an email I have to go to my email client (I use Thunderbird and a few Cmd-Shift clicks on OSX will take me there), get a new message window open, start typing the person's email address, and then a subject line and then get my cursor in the main window.  It's not huge, and perhaps it would be simpler in some webmail set ups, but it's all little cruft actions that get in between my thought and getting it across to someone.

For IM chat (in my case, usually Skype text chat) I just Cmd-Shift to that window and start typing.  I may need to click on a different chat room, but it's pretty damn fast.  Of course the dynamics of both email and IM change if you are actually responding to someone, but I really do find myself feeling like their is a lower barrier to the IM chat, and by arranging the groups of people in the different Skype chat rooms appropriately there's much better visibility than email, although that depends on how people are using Skype.

Some might argue that the lower barrier is a bad thing, causing myself, colleagues and students to spend all their time blathering in Skype text chat.  Also, as Dave Patterson mentions in CS169.1X, there is the danger of communication addiction, where you are constantly seeking little dopamine squirts and find yourself checking for messages all the time.

However, this issue of Dropbox dropping the public folder only finally became clear to me as a result of chatting with a student in Skype text chat.  Maybe it would ultimately have come out in an email or a forum post, and maybe it distracted me from doing something else important, but having at least a partial window into what students are going through as they try to complete assignments seems like it might be the most crucial thing for an online instructor.  Or perhaps I'm just deluding myself in order to get another dopamine fix :-)

My Mobile Design & Programming Course Available Publicly

So Hawaiʻi Pacific University (HPU) has very kindly given me permission to take my Mobile Design and Programming class public.  The class is already under way and has 9 HPU students and 6 external students.  It's not exactly a MOOC (Massive Open Online Class), more of a SOOC (Small Open Online Class).  I'm quite happy with it that way for the moment.  I'm testing out some new features such as an assignment self-tracking system (see image below) that I developed using Google App Scripts and plugged into Google Sites, and I think it's good to start small with these things.

Also, I think the key thing about classes is being able to have meaningful interactions with the other class members, which is challenging in MOOCs.  I'm hoping that I can gradually scale this class up to more students while maintaining a tight knit feel.  In order to do that I think we have to start small and gradually work our way up, rather than starting with 40,000 students and then trying to work back from there.

Some things I am happy with are having migrated my class syllabus purely to HTML (goodbye word documents), shared all my materials under Creative Commons BY licensing and being explicit about learning objectives on a week by week basis.  I'm also continuing to enjoy having all my lecture videos on YouTube, Skype chatrooms and having all my students submit assignments on their own personal blogs. I think this last is the critical thing that may allow this more personal (POOC?) type of course to scale.

The problem with MOOCs is that they hope all the students will spend time posting internally into their forums, which creates a great cache of content inside the MOOC for the MOOC authors, but I feel the value proposition is not so good for the students.  By posting on their blogs students associate their assignments and opinions more strongly with themselves; they build up a portfolio of their work that can exist, and be discovered, outside the MOOC.  The student can still control their blog visibility, and they can always go back and revise any content they are not happy with.  Rather than a certificate at the end of the course, the students have a fully browsable blog documenting their creative process - I know which I'd prefer :-)