New Google Drive design forgets about desktop users

Update 8/15/14: Google has fixed this! The list view is now properly dense with about twice as many items as the thumbnail view. Thanks Google!

I was excited to see Google post their new design for Drive. Given that this is a major new design with no doubt significant thought behind it, I was surprised - and dismayed - to see that the two primary views of documents (list view and thumbnail view) show the same number of documents. The textual list view, typically designed for efficient scanning of large numbers of items based on full title and some metadata shows no more items than the image based view.

New Google Drive with list view on left, and thumbnail view of same documents on right.

This may seem like an esoteric design detail, except it isn't. It goes to the heart of design decisions where there is a single design that must serve a huge community (probably hundreds of millions of users). Depending on your view, design is driven down to the least common denominator, or perhaps it is better viewed as regression to the mean.

My guess is that the whole redesign is built to better support touch screen systems given the huge vertical space between items. This is great for all those phone and tablet users, and even the occasional Chromebook Pixel user. But what about us folks in an office with a big screen and a mouse? I know that Apple serves the causal computer using market first, but now even Google has abandoned the regular office worker!

The reason this is an issue is because the trade-off between these two approaches - at least in my view - is primarily between the density of items, and amount of interaction. That is, one view (typically the thumbnail view) should have fewer items with a sparser layout requiring more interaction to see more items. But the painful and expensive scrolling operation (in comparison to moving your eye) is sometimes worth it because of the additional information made available by the additional information per item. The other view (typically the list view) should have more items with a denser layout so you can quickly scan through many items without having to scroll as much.  Arguable, the additional owner and date information in the text view provides the relative advantage, but make no mistake - the text view is a very sparse design.

No doubt, the major vendors are wise to provide an excellent experience for mobile and touch users. But PLEASE don't abandon us desktop users. Don't make the mistake that Microsoft did with Windows 8. You can not design a single experience for all people and all form factors. You must detect what systems people are using and provide an optimized experience for that design. Or at least offer customization options.

Interface designers that build a single experience for all humans on the planet or doomed to disappoint huge segments of the market. Don't let this be you.

My new job: Associate Provost of Learning Initiatives

I am excited to start a new job on campus as Associate Provost of Learning Initiative and Executive Director of the Teaching and Learning Transformation Center.

For those of you wondering why I would give up the world's best job as a professor developing the future of interactive computing technologies: Technology is on the cusp of significantly changing the way that people experience higher education (actually, it already has - from MOOCs to GitHub to YouTube and StackExchange, Twitter, Skype & Google docs...). Now it is poised to change the classroom experience as well. I see this role as an opportunity to apply all that I have learned from my work in the field of HCI over the past 20 years directly to the campus that I love and want to see thrive. From enhanced user experiences to analytics that balances transparency and privacy across multiple stakeholders, this is HCI's time to improve our campus. And if you want to know how I got to this point, then learn about the HCIL - the world's best HCI research group: http://www.cs.umd.edu/hcil/. (Oh, and of course I can always revert to being a regular faculty member if this doesn't work out...)

-----

Dear University of Maryland Faculty:

I am pleased to announce the formal establishment of the Teaching and Learning Transformation Center (TLTC) and the appointment of Professor Benjamin B. Bederson as the new Associate Provost of Learning Initiatives and founding Executive Director of this new center.

The TLTC will be the hub on campus that brings together support, incentives, infrastructure, assessment, and innovation for the University's educational mission.  It will provide leadership around teaching and learning, including the use of technology to transform the students' and instructors' experiences, both in the classroom and in an online environment.  The TLTC will integrate the Center for Teaching Excellence from the Office of Undergraduate Studies and the Learning Technologies and Environments group from Division of IT.  It will also add a campus-wide resource in assessment and learning analytics.  Together, this critical mass will further promote innovation and excellence in education at both the graduate and undergraduate levels.

Dr. Bederson (www.cs.umd.edu/~bederson/) is a Professor of Computer Science and prior director of the Human-Computer Interaction Lab at the Institute for Advanced Computer Studies (UMIACS) and iSchool.  An ACM Distinguished Scientist, his research is on technology-enhanced education, interaction strategies, crowd sourcing, mobile device interfaces, visualization and digital libraries.  He is a widely respected innovator, entrepreneur, and scholar in interactive systems who has worked on a wide variety of interdisciplinary projects, published broadly, and founded a successful mobile apps company.

Please join me in welcoming Professor Bederson to his new position.  Many of you will no doubt hear from him in the coming months as the center is developed.  He also asked me to say that he welcomes hearing from you about your concerns and ideas about teaching and learning on campus.

Mary Ann Rankin
Senior Vice President and Provost

Google Sheets as website backend store

Two summers ago, I spent an inordinate amount of time rebuilding my home page using a database and Django so I had a good UI for entering new data. It was a fun learning project, and it worked well, but was very tricky to get configured on my CS dept. controlled server. Fast forward to now. Some small thing broke and I realized it was going to take a long time to figure well enough how things worked so I would be able to fix it. And even if I fixed it, I'd surely have to go through this again the next time it broke.

Complexity is poor design. So I decided it was time to kill the database and Django and go for a much simpler solution.

I am now using Google Sheets as my backing store, and have straightforward Javascript that queries the store. The end result is that I deleted TONS of code, removed all the configuration junk, and now have a collaborative editing model for the backend data that drives my (simple website).

My home page uses 3 spreadsheets as data stores - News, Projects, and Recent Publications. Each one is implemented similarly, so I'll include the code here for my News in case anyone wants to try this. It relies on Google's visualization library since Google wrote this to make it easy to use their charts and visualizations based on their spreadsheet data.

In your HTML, include Google's Javascript API:

In your Javascript, load Google's visualization library

// Load Google visualization code to support spreadsheet data fetching

if (typeof google !== 'undefined') {

    google.load('visualization', '1', {'packages': []});

}

Make sure your spreadsheet is publicly readable, and that store the spreadsheet URL in your code like this.

var newsSource = 'https://docs.google.com/spreadsheet/ccc?key=0Al_L57Iqw4WSdFhUYkFrMUhsRGFXdUhfUTJydU5JekE';

Then, the following functions shows how I got the data from my spreadsheet, complete with a SQL'ish query mechanism, and displayed it. You'll have to modify it for your site, but the approach is pretty straightforward.

function loadNews(limit) {

var query = new google.visualization.Query(newsSource);

query.setQuery('select D where A=true order by B desc limit ' + limit);

numNewsLoaded = limit;

query.send(newsQueryResponse);

}

function newsQueryResponse(response) {

if (response.isError()) {

alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

return;

}

var dataTable = response.getDataTable();

news_data = convertToArray(dataTable);

newsLoaded(news_data);

}

function newsLoaded(data) {

var str = "

";

for (x in data) {

var item = data[x];

var html = item[NEWS_HTML];

str += "

" + html;

}

str += "

";

if (numNewsLoaded == initNumNews) {

str += "older news...";

}

$("#news").html(str);

}

function convertToArray(dataTable) {

    var numCols = dataTable.getNumberOfColumns();

    var r,c,arr = [];

    arr.length = dataTable.getNumberOfRows(); // pre-allocate for speed

for (r=0; r

var a = [];

        a.length = numCols; // pre-allocate for speed

for (c=0; c

arr[r] = a;

}

return arr;

};

Note that Google's new spreadsheets aren't supported yet. You can read more about Google's support for these kind of data queries.

Thanks to grad student Adil Yalcin for helping me figure out this trick.

Guest Post: Ben Shneiderman on "Her"

My colleague, Prof. Ben Shneiderman wrote the following review of the recent movie "Her". I post it because it reflects Shneiderman's long-time argument that anthropomorphizing computing systems is neither effective nor appreciated by users. Although "Ask Alex" on www.united.com is an example that has been running for at least 1.5 years so why is it apparently successful there? And while Siri may not be in the news much anymore, Apple hasn't pulled it from iOS either. Time will tell if Shneiderman's prediction that all such anthropomorphic technologies will disappear.

Shneiderman's observations that "the need for physicality, exclusivity, and full disclosure are central to human relationships"may seem obvious when you read his argument, but it is this clarity of recognition that makes the review valuable. This much longer review in Wired where these issues never take center stage make the point that the "obvious" is only such if you are tuned to what is important.

---------

Review of Her (the film)
    Ben Shneiderman (1/12/2014)

This creative, clever film depicts current fantasies about how an OS could have a “real” loving relationship with a person.  The emotional empathic tone of Theodore and the charming voice of Samantha make compelling conversation, that seduces Theodore and the audience for a while.  But Samantha’s total misreading of human physicality emerges when she sends a surrogate body, which Theodore rejects.  When she reveals that she is having 641 simultaneous loving discussions, their relationship hits a brick wall.

The need for physicality, exclusivity, and full disclosure are central to human relationships, but Samantha’s programmers failed to realize even those basic requirements.  Of course, they fail in so many other ways, but the screenwriters cleverly manipulate the audience to go along with the perfect partner fantasy.  Scarlett Johansson skillfully says all the right things with delightful empathic intonation, reminding us of our powerful attraction to supportive comments, thoughtful suggestions, vulnerable phrasing, and loving teases.

The filmmakers are right in reminding us of our growing infatuation with mediated relationships.  Real people need real love, not artificial substitutes or technology distractions.  So, will audiences turn off their phones and turn on to their partners, family, and friends to express genuine feelings?  I hope so.

This film continues to promote the misguided belief that humans want technological partners and avatar-based machines.  Consumer rejection of anthropomorphic technologies has been consistent for the past half century (Tillie the Teller, Postal Buddy, Ken the butler, Clippie, Ananova, etc.) but new generations of designers keep coming up with fresh versions, which will also disappear.

This future technology portrayal continues the 50-year old Star Trek/Star Wars tradition of using voice communications to let the audience know what is happening, and use emotional tone effectively.  However, the future of computing will be more visual than verbal.  Voice is important for human relationships, but can’t keep up with the human mind’s desire for information abundance and swift decisions.

The film also might trigger reflections on the merits of autonomy and interdependence.  The mistaken model of autonomous machines has dangers, and the need for human balance between autonomy and interdependence needs modern reinterpretations to fit evolving technology.  Human locus of control is an essential design guideline, even as technology sophistication grows.

Prof. Ben Shneiderman          ben@cs.umd.edu
Dept of Computer Science   301-405-2680  
A.V. Williams Building             www.cs.umd.edu/~ben
University of Maryland          www.cs.umd.edu/hcil
College Park, MD 20742        Twitter: @benbendc