{"id":1834,"date":"2016-06-24T00:00:00","date_gmt":"2016-06-23T22:00:00","guid":{"rendered":"https:\/\/wwwneu.strehle.de\/tim\/weblog\/archives\/2016\/06\/24\/1594\/"},"modified":"2025-07-31T21:56:53","modified_gmt":"2025-07-31T19:56:53","slug":"1594","status":"publish","type":"post","link":"https:\/\/www.strehle.de\/tim\/weblog\/archives\/2016\/06\/24\/1594\/","title":{"rendered":"Speak the customer\u2019s language and put content first in your DAM UI"},"content":{"rendered":"\n<p>We\u2019re currently designing our DAM system\u2019s next generation user interface (UI), and one of the things I\u2019m thinking about a lot is <strong>how to present content, and how to navigate it<\/strong>, in a way that makes sense to the people using the DAM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mental models<\/h3>\n\n\n\n<p>For the DAM vendor, it\u2019s natural to view a DAM system as a <strong>generic container<\/strong> for any kind of \u201cassets\u201d or \u201ccontent\u201d, plus functionality for operating on those assets. If you asked me as a DAM developer for the main sections of a DAM, I\u2019d go for something like \u201cSearch, Edit, Upload\u201d.<\/p>\n\n\n\n<p>Here\u2019s how some <strong>DAM products<\/strong> name their main navigation items (the first line is from our DC-X product), exemplary of the \u201cgeneric container\u201d approach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Search | Story Editor | Upload<\/li>\n\n\n\n<li>Assets | Browse | Spaces | Collections<\/li>\n\n\n\n<li>Content | Your Uploads | Workflows | Your Collections<\/li>\n\n\n\n<li>Workspace | Keywords | Products | Collections | Search<\/li>\n\n\n\n<li>Collections | Searches | Folders | Favorites<\/li>\n<\/ul>\n\n\n\n<p><strong>Users<\/strong> usually have a different perspective focused on <strong>specific types of content<\/strong>, or its status in a workflow \u2013 to them, the main sections might instead look like one of these:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Incoming material | In production | Archives<\/li>\n\n\n\n<li>Images | Videos | Texts | Office documents<\/li>\n\n\n\n<li>Publication A archives | Publication B archives<\/li>\n<\/ul>\n\n\n\n<p>You\u2019re probably familiar with \u201cmental models\u201d. It\u2019s how you imagine something works and is structured. Obviously, if the user\u2019s mental model of the DAM system doesn\u2019t match what he sees in the DAM UI, it\u2019ll keep him from fully utilizing it. Jakob Nielsen wrote (back in 2010) in <a href=\"https:\/\/www.nngroup.com\/articles\/mental-models\/\">Mental Models<\/a>: \u201cIt&#8217;s amazing how one misconception can thwart users throughout an entire session. [\u2026] This is yet another argument for complying with <strong>preexisting user expectations<\/strong> whenever possible.\u201d<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Speak the user\u2019s language<\/h3>\n\n\n\n<p>One aspect of the mental model is the terms used to describe something. A few days ago, <a href=\"https:\/\/twitter.com\/tistre\/status\/746012531949510656\">I tweeted<\/a>: \u201cTry explaining your Web app\/site to someone unfamiliar with it, and watch out for where the words you use differ from the copy used on site.\u201d (I was thinking of the term \u201cAgent\u201d we use in DC-X, which is fancy tech speak for a saved search that can alert you by e-mail when new matches are found.)<\/p>\n\n\n\n<p>Once more, Jakob Nielsen (from 1995) \u2013 <a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\">10 Usability Heuristics for User Interface Design<\/a>: \u201c<em>Match between system and the real world:<\/em> The system should <strong>speak the users&#8216; language<\/strong>, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.\u201d<\/p>\n\n\n\n<p>I doubt any DAM system users (except for librarians and IT) ever use the term \u201cassets\u201d. If a new colleague is told to \u201cgo to this URL for news agency images and our newspaper archives\u201d, it\u2019ll certainly help a lot to actually see \u201cnews agency images\u201d and \u201cnewspaper archives\u201d prominently featured on that page.<\/p>\n\n\n\n<p>Never forget that <strong>people are busy<\/strong> and try to use the DAM system to get some job done \u2013 ideally, in just a few seconds, without them having to adapt to new UI conventions, terminology and information architecture. Try having someone glance at the DAM system for five seconds and then explain to you what that system is about\u2026 You might want to read Steve Krug\u2019s book <a href=\"http:\/\/www.sensible.com\/dmmt.html\">Don\u2019t Make Me Think<\/a> if you haven\u2019t already!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content first<\/h3>\n\n\n\n<p>One more discussion worth having is how prominently to feature content: Is the DAM system screen dominated by lots of system specific \u201cchrome\u201d, or is most <strong>screen space dedicated to the content<\/strong> itself? I <a href=\"https:\/\/twitter.com\/tistre\/status\/738848888933650436\">tweeted<\/a> my opinion on this: \u201cContent is king. So let\u2019s build beautiful Web sites showcasing our customers\u2019 digital creations instead of rolling out generic #DAM UIs.\u201d<\/p>\n\n\n\n<p>To illustrate what I mean, here\u2019s a screenshot of an image search in our current DC-X UI. The screen space occupied by the content the user was looking for is highlighted in blue. The space where the navigation matches the user\u2019s mental model of how the content is structured is outlined in red:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/s3.eu-central-1.amazonaws.com\/files.strehle.de\/tim\/blog\/2016-06-24-dcx_document_preview_areas.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.eu-central-1.amazonaws.com\/files.strehle.de\/tim\/blog\/2016-06-24-dcx_document_preview_areas.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>I know the comparison is a bit unfair, but I\u2019d rather dedicate much more space to the content itself, maybe like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/s3.eu-central-1.amazonaws.com\/files.strehle.de\/tim\/blog\/2016-06-24-simple_ui_document_details_areas.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.eu-central-1.amazonaws.com\/files.strehle.de\/tim\/blog\/2016-06-24-simple_ui_document_details_areas.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>What do you think? (Sorry that I haven\u2019t gotten around to implementing comments on my blog yet. You know how to reach me via e-mail or Twitter.)<\/p>\n\n\n\n<p><em>Update (2016-08-03):<\/em> I think Flickr does a pretty good job at putting content first. Here\u2019s the details view of one of my photos on Flickr:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.flickr.com\/photos\/28943361@N06\/28119881994\/\"><img decoding=\"async\" src=\"https:\/\/s3.eu-central-1.amazonaws.com\/files.strehle.de\/tim\/blog\/flickr-image-details.jpg\" alt=\"Flickr image details screenshot\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re currently designing our DAM system\u2019s next generation user interface (UI), and one of the things I\u2019m thinking about a lot is how to present content, and how to navigate it, in a way that makes sense to the people using the DAM. Mental models For the DAM vendor, it\u2019s natural to view a DAM [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_share_on_mastodon":"0"},"categories":[1],"tags":[],"class_list":["post-1834","post","type-post","status-publish","format-standard","hentry","category-weblog"],"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/comments?post=1834"}],"version-history":[{"count":1,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1834\/revisions"}],"predecessor-version":[{"id":1910,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1834\/revisions\/1910"}],"wp:attachment":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/media?parent=1834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/categories?post=1834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/tags?post=1834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}