Category Archives: User interface

Registration Opens for “Digital Approaches to Hebrew Manuscripts” at KCL…


We are delighted to announce the programme for On the Same Page: Digital Approaches to Hebrew Manuscripts at King’s College London. This two-day conference will explore the potential for the computer-assisted study of Hebrew manuscripts; discuss the intersection of Jewish Studies and Digital Humanities; and share methodologies. Amongst the topics covered will be Hebrew palaeography and codicology, the encoding and transcription of Hebrew texts, the practical and theoretical consequences of the use of digital surrogates and the visualisation of manuscript evidence and data. For the full programme and our Call for Posters, please see below.

Registration for the conference is free. As places are limited, we recommend registering at an early point to avoid disappointment. To register, please click on this link:

Refreshments will be provided, but attendees should make their own arrangements for lunch.

Very much looking forward to seeing you in May,

Stewart Brookes, Debora Matos, Andrea Schatz and Peter Stokes

Organised by the Departments of Digital Humanities and Theology & Religious Studies (Jewish Studies)
Co-sponsor: Centre for Late Antique & Medieval Studies (CLAMS), King’s College London

Call for Posters
Are you involved in an interesting project in the wider field of Jewish Studies? Would you like to have a presence at the conference even though you’re not giving a paper? If so, then you might like to consider submitting a poster which summarises the objectives, significance and outcomes of your research project. We’ll display posters throughout the conference and if you attend with your poster, then you can talk about your work with attendees during the lunch breaks. Display space is limited, so please send a brief summary (max. 100 words) of your research/project to The deadline for the receipt of submissions is Thursday 30th April 2015. Notice of acceptance will be sent as soon as possible after that date.

Conference Programme 

Monday 18th May 2015

8.45 – Coffee and registration

9.15 – Welcome

  • Stewart Brookes and Débora Matos (King’s College London)

9.30 – Keynote lecture

  • Chair: Andrea Schatz (King’s College London)
  • Colette Sirat (École Pratique des Hautes Études): The Study of Medieval Manuscripts in a Technological World

10.30 – Coffee/Tea

11.00 – Session 1: Digital Libraries: From Manuscripts to Images

  • Chair: tbc
  • Ilana Tahan (British Library): The Hebrew Manuscripts Digitisation Project at the British Library: An Assessment
  • César Merchán-Hamann (Bodleian Library): The Polonsky Digitisation Project: Hebrew Materials
  • Emile Schrijver (Bibliotheca Rosenthaliana/University of Amsterdam): The Real Challenges of Mass Digitization for Hebrew Manuscript Research

12.30 – Lunch break

13.30 – Session 2: (Roundtable): Digital Images: Scale and Scope

  • Chair: Jonathan Stökl (King’s College London)
  • Rahel Fronda (University of Oxford): From Micrography to Macrography: Digital Approaches to Hebrew Script
  • Ilana Wartenberg (UCL): Digital Images in the Research of Medieval Hebrew Scientific Treatises
  • Estara Arrant (University of Oxford): Foundations, Errors, and Innovations: Jacob Mann’s Genizah Research and the Use of Digitised Images in Hebrew Manuscript Analysis
  • Dalia-Ruth Halperin (Talpiot College of Education, Holon): Choreography of the Micrography

15.00 – Coffee/Tea

15.30 – Session 3: Digital Space: Joins and Links

  • Chair: Paul Joyce (King’s College London)
  • Sacha Stern (UCL): The Calendar Dispute of 921/2: Assembling a Corpus of Manuscripts from the Friedberg Genizah Project
  • Israel Sandman (UCL): Manuscript Images: Revealing the History of Transmission and Use of Literary Works
  • Judith Kogel (CNRS, Paris): How to Use Internet and Digital Resources to Identify Hebrew Fragments

17.00 – Keynote lecture

  • Chair: Stewart Brookes (King’s College London)
  • Judith Olszowy-Schlanger (École Pratique des Hautes Études): The Books Within Books Database and Its Contribution to Hebrew Palaeography

Tuesday 19th May 2015

9.15 – Keynote lecture

  • Chair: Peter Stokes (King’s College London)
  • Malachi Beit-Arié (Hebrew University of Jerusalem): The SfarData Codicological Database: A Tool for Dating and Localizing Medieval Codices, Historical Research and the Study of Book Production – Methodology and Practice

10.15 – Session 4: Digital Palaeography: Tools and Methods

  • Chair: Julia Crick (King’s College London)
  • Débora Matos (King’s College London): Building Digital Tools for Hebrew Palaeography: The SephardiPal Database
  • Stewart Brookes (King’s College London): A Test-Case for Extending SephardiPal: The Montefiore Mainz Mahzor

11.15 – Coffee/Tea

11.45 – Session 5: Digital Corpora: Analysis and Editing

  • Chair: Eyal Poleg (Queen Mary University of London)
  • Ben Outhwaite (Cambridge University Library): Beyond the Aleppo Codex: Why the Hebrew Bible Deserves a Better Internet
  • Daniel Stökl Ben Ezra (École Pratique des Hautes Études), co-author Hayim Lapin (University of Maryland): A Digital Edition of the Mishna: From Images to Facsimile, Text and Grammatical Analysis
  • Nachum Dershowitz (Tel Aviv University), co-author Lior Wolf (Tel Aviv University): Computational Hebrew Manuscriptology

13.15 – Lunch break

14.30 – Keynote lecture

  • Chair: Débora Matos (King’s College London)
  • Edna Engel (The Hebrew Palaeography Project, Israel): Hebrew Palaeography in the Digital Age

15.30 – Session 6: Data and Metadata

  • Chair: tbc
  • Sinai Rusinek (The Polonsky Academy at the Van Leer Jerusalem Institute): Digitally Reading from Right to Left
  • Yoed Kadary (Ben Gurion University): The Challenges of Metadata Mining in Digital Humanities Projects

16.30 – Concluding roundtable

17.00 – Refreshments

The conference convenors would like to thank the Departments of Digital Humanities and Theology & Religious Studies as well as the Faculty of Arts & Humanities and the Centre for Late Antique and Medieval Studies at King’s College London for their generous support. With thanks to the Free Library of Philadelphia Rare Book Department for permission to use the image from Lewis O 140 (The Masoretic Bible of Portugal). Photograph courtesy of Débora Matos.




Creating a UX design pattern library for Digital Humanities projects

Recently I posted some thoughts about how emerging trends in the field of user experience (UX) design might be embedded in our project design and development process. In this post I’m going to discuss this further, concentrating on the UX pattern library the user interface (UI) team are developing.

What is a UX pattern library?

Designers and developers in the DDH research team work on a number of projects with diverse design and development requirements but in terms of UI design we often find we have similar problems we need to solve. For example, these might include designing tools for surfacing content such as search and browse mechanisms, ways to facilitate collaborative editing of images or documents or managing a user’s workflow.

A pattern library is a way of describing the interaction methods we might use to solve common design problems. When faced with a problem on a project it can act as the first port of call for a designer or developer and help them understand which tool they should use to deal with the particular problem they are facing.

In addition to textual descriptions and images of various interaction methods the library can also contain example code snippets that developers can copy and paste, adapting them as necessary to the needs of their projects.

What are the advantages of a pattern library?

At its most basic a pattern library prevents the need for designers and developers to “reinvent the wheel” the next time they need to design or implement an aspect of a user interface. This saves time and reduces the need for developers to refer to design staff or to create their own untested solutions.

Beyond this, it also ensures consistency in terms of user interface design, not just within a project but across multiple projects. By using common patterns which are recognisable to users we reduce the cognitive load on them by not requiring them to constantly learn how to use new tools; in other words it enhances usability.

Inspiration for the patterns might come from previous projects we have worked on, or on solutions from beyond the field of digital humanities. For instance, when we were considering best practice solutions for faceted browsing we looked at both our previous implementations and examples from the field of e-commerce. Our key concerns are enabling our users to achieve their goals (e.g. locating relevant information in a search or browse) and doing this in a way that is intuitive and as simple as possible. Doing so removes the barriers to using resources and as a result hopefully promotes engagement with them.

Why another pattern library?

A number of UI design pattern libraries have already been published, including:

Some of these (e.g. BBC and Mailchimp) are focussed on a particular brand or product, others such as UI Patterns and the Yahoo library are more general. Although these have been useful as a starting point we felt we needed to have a library that reflected the kinds of issues we face in digital humanities projects—not just around issues of searching/browsing and workflow mentioned earlier but also ones which address the traditional concerns of humanists, such as reading long-form texts, comparing editions and viewing cross-references and footnotes.

Does a pattern library inhibit innovation?

A critique that might be levelled at pattern libraries is that they can stifle innovation or creativity in interface design. This only really becomes an issue if a library becomes a static document which is not updated to reflect emerging or even experimental patterns. The web in particular is an ever-changing environment: new trends and technologies are constantly emerging which can affect how user interfaces are designed and implemented; experimentation drives web design forward.

However, we should always be asking ourselves how a user interface element allows a user to complete her goals. For instance, does that whizzy data visualisation really help the user to make sense of a data set, or is it just a bunch of confusing overlapping lines? Do users really appreciate their browser scrollbar suddenly behaving in a different way on one website? If untested or implemented badly UI elements may run the danger of becoming “anti-patterns” that frustrate or actively hinder the user.

Next steps

We are currently in the process of identifying, describing and creating code snippets for the most common design patterns. We are creating descriptions on an internal Wiki and developing code snippets in a Github repository. Once we have a critical mass of patterns described and gathered feedback on them we plan to publish the descriptions on a publicly available website, linked through to an open source project containing the code snippets.

Improve performances with jQuery best practices

Nowadays we include jQuery almost by default in most of our DDH projects. It offers so much to both designers and developers that it would be very difficult to complete a project without it.

As with most libraries, jQuery includes an incredibly large collection of elements and behaviours, more than we will ever use in one single development.

  • The good bits: it’s ready to use, highly customisable and, most more often than not, cross browser compatible.
  • The bad bit: might not be as performant as a custom built JS library.

Performance is key to a successful website, even more so when dealing with a large amount of data.

Although we might not want to go down the route of custom built JS libraries (time consuming), we can adopt some good practices to keep performances at their best while enjoying every bit of this jQuery magic.

This document covers some of the common standards worth looking at: jQuery Coding Standards & Best Practices.

Reporting from MEX 2013

I recently struggled to get back into writing, whether for lack of time or for the ability to focus on one single subject. And that’s why it took me so long to report back about my experience at MEX, last September.

MEX is a conference about mobile user experience that happens periodically in London. As they put it themselves:

MEX is an event focused on user modes as the raw ingredients of digital experience across phones, tablets, PCs, wearables and more. Learn from expert speakers, develop skills & ideas in facilitated creative sessions and gain lifelong access to a network of fellow pioneers.

I applied for a scholarship and, luckily enough, I was granted a place.

The round of speakers was pretty impressive and I was looking forward to find out more about the latest in the field.

My goals

Since I have only recently started to approach UX in a more didactic way rather than instinctively (Finally! You say, I agree), I wanted to find out:

  • How much of what I do by instinct is right and how much is wrong
  • How do you sell UX to a client?
  • How much psychology is involved?
  • Tips on how to approach UX

The talks


I enjoyed Sofia Svanteson and Per Nordqvist‘s enthusiasm while presenting their ‘Explore’ talk, on how task based interactions are becoming limited, they only work when a user has a specific goal to achieve. James Taplin told us how technology and focus on UX can help improve the world promoting the ‘Principal Sustainability’. I learnt how much easier could the process of learning be, when you get the UX right, as Arun Vasudeva showcased some examples of rich content integration in education.
The interesting concept of co-creation was mentioned by Lennart Andersson, while Ben Pirt showed us how badly UX is implemented in hardware design! Where is the power button?
Jason DaPonte talked about his Sunday Drive app and hinted at the still unutilised potentials to integrate UI with existing devices (car navigation systems in this case).
Then we learnt how the majority of young users don’t listen to digital music in a ‘traditional’ way anymore, they prefer platforms like YouTube, Spotify, Grooveshark and how this generates an opportunity for developing a new design and offer a different experience. As Brittney Bean introduced us to her new project Songdrop between a joke and the other.

After all this information in one single day I wasn’t sure I could absorb more on day 2, but I did.

I discovered my inner (Forrest) Gump, as James Haliburton put it. How our receptive mode depends on context and spontaneity and how indeterminate and non-committal it can be.
Amy Huckfield intends to improve the life of children with ADHD with her research ‘Children with ADHD: The untapped Well of Future Creatives’, basically helping the child re-engage and re-focus after losing attention through an interactive wristband.
Rich Clayton explains how his Travel Time app could help business analyse their geographic data in an affordable way, because time could be more important than distance.
And finally Davide “Folletto” Casali tells us that 70% of the projects fail because of lack of users’ acceptance. We tend to adapt the tools we have, rather then look for the right ones to satisfy our needs, even when developing. To quote Bruno Munari:
“Complicare è semplice. Semplificare è difficile.” (To complicate is easy. To simplify is difficult.)

The ‘Creative sessions’

I didn’t particularly enjoy the Creative Sessions. Attendees were split in groups and were supposed to discuss and explore different topics. I was in the Create group and to date I am not sure what our objectives were. Maybe the topic was too broad. We ended up starting various interesting conversations on how to define a currency other than money to help potential users (we had set our target on students as an example), but we ended up with few ideas on a platform that could help with this currency exchange rather than an idea on how to enhance creation through user experience.


I find myself using a fairly common approach to user experience design, although I wasn’t aware I was doing it. That means there is a lot of room for improvement and definitely UX is becoming a conscious part of my design since stage one of sketching from now on.

Is UX changing?
Yes, it is. User are getting ‘smarter’ and UX needs to adapt quickly and continuously. Fairly obvious, but it’s because it’s obvious that it’s easy to forget. It’s not just the devices that are changing, users are too.
People want rich(-er) content, they look for it, feeling like they are making their own choices, but they do look for guidance and good UX design can be that guide.

Off topic things I learnt

The th sound is really a challenge for us Italians (I hope Davide “Folletto” Casali won’t get offended by this comment).
But I also learnt that the letter j makes Scandinavians struggle.

Lean UX in DH projects

As the user experience (UX) lead (and often sole UX practitioner) in a small team of software developers I’ve often had to adopt a pragmatic approach to incorporating a UX workflow into our project work. This has involved keeping clear of trendy methodologies and buzzwords, instead focusing on the key outcomes of creating the best possible user experience for the end-users of our products. To do this we follow a user-centred design process wherever possible, undertaking research with our target user groups, designing interfaces that allow them to achieve their goals and testing our designs with “real” users in the form of one-to-one usability testing.

Continue reading Lean UX in DH projects

Museums on the Web 2011

At the end of this year’s Museums on the Web conference at the Imperial War Museum (IWM) we were asked what our “key takeaways” from the day were. The presentations and discussions covered a wide range of interesting topics but I was most impressed with the work going on in the area of public engagement with creating and using digital resources; and the emphasis of the importance of user-centred design processes in enabling this.

365.162: Imperial War Museum

Mark O’Neill from the Government Data Service opened proceedings with a keynote speech highighting the challenges of improving user experience for the use of digital resources; particularly important given the commitment to “digital by default” for government services.

An interesting comparison was suggested: how are museums different from Ikea? Comparing a search across the Ikea website and a museum website (which will remain namless!) for an object, “vase” it was clear which one of these had a more seamless user experience: the commercial website was designed around the needs of users to easily achieve their goals (in this instance find a vase for sale) whilst the museum website lagged somewhat behind, its interface designed around the institution’s own internal language, not welcoming outsiders.

Subsequent speakers gave presentations on participatory projects initiated by their institutions. The Pallant House Gallery‘s  Outside In project provides a platform for artists with disabilities to display their work, uploading images of it via a web interface developed in an iterative manner during workshops with the artists themselves. The next stage is to develop a mobile app which removes further boundaries to involvement: direct upload via mobile involves fewer cognitive steps as images can be selected directly from the device that created them.

Tom Grinsted from the Imperial War Museum and Claire Ross from UCL department of Digital Humanities described an IWM project in development to make use of visitors’ commentaries of museum objects: Social Interpretation — bringing the levels of engagement and interaction that users experience with social media to the museum environment. The project is being run using an agile methodology at all stages: design, development and management to ensure that the outputs are produced iteratively and thoroughly tested with users at every stage. The project aims to develop interfaces to allow visitors to add their commentaries and interpretations via kiosk in the museum and web and mobile outside.

Another exciting participatory project run by the IWM is Lives of the Great War: using public involvement to recreate the stories behind those who served and died in the First World War. It aims to support this by providing direct access to the various information resources, currently dispersed across the web, some behind paywalls. It is also hoped that the data generated will be released under a “CC0” licence (the most permissive Creative Commons licence) and be archived permanently.

Interestingly, the IWM were shown to be pioneers in crowdsourcing: their earliest request for objects and memorabilia from the Great War took part at the war’s end in the form of a leaflet included with ration books!

Issues surrounding crowdsourcing received attention: namely questions of moderation of content and authority. Some basic moderation can be handled technically (e.g. via filters to remove swearing) but the community itself can also be a useful moderation tool (as it is currently on the Guardian website). Data release under Creative Commons licences (particularly “CC0”) can be more problematic in some areas than others, e.g. the performing arts.

Other presentations covered some very interesting areas I haven’t discussed here, including planning and measuring your digital strategy, refining your metadata and demonstrations of some very innovative software; it will be worth checking the MCG website for links to the presentation slides.

Overall I was impressed with the level of innovation — and collaboration —  in the sector; something I’m sure the digital humanities as a closely related area could learn from and share in.

You SPILt my code: a modular approach to creating web front ends

One of the projects I’ve been working on since starting at DDH in May is a review of the front-end development framework we’re currently using to build websites, sUPL or the Simple Unified Presentation Layer. The aim of sUPL was to be a lightweight markup scheme — lightweight both in terms of using minimal HTML markup and short class and ID names (commonly used to apply CSS styles and to trigger Javascript-based interactivity).

Whilst sUPL had served the department well for a number of projects I wanted to update it to reflect recent changes in the front-end development world and also to put the emphasis back on the “simple” in sUPL. After reading around and trying out a number of existing front-end frameworks (e.g.  as Blueprint,  YUI, HTML5 Boilerplate, OOCSS and 320 and Up) I felt our own framework should be updated along the following lines:

  • Be written it in HTML5, to make use of new structural elements and prepare the ground for the use of HTML5 APIs;
  • Move away from terse class names to longer but more “human readable” ones;
  • Employ the Object Oriented CSS (OCSS) methodology of maximising the reuse of CSS code by only applying CSS styles to classes, not IDs;
  • Using the OOCSS concept of “objects”, that is that is reusable chunks of HTML, CSS and Javascript code to build common design patterns.

Welcome to SPIL: the Simple Presentation and Interface Library

There are quite a few frameworks out there so why create another one? Most of the existing frameworks have been created for highly specific purposes (e.g. YUI) or they are more generic (e.g. the HTML5 Boilerplate). SUPL’s successor, SPIL (Simple Presentation and Interface Library) can be thought of as a toolkit (or Lego!)  for constructing web pages and applications, providing both a generic structure for page layout and the ability to “plug in” interface design patterns which will work “out of the box”.


SPIL makes use of the new HTML5 structural elements such as header, footer, section, nav and aside, loading in the Modernizr Javascript library to provide support for older, less capable browsers such as Internet Explorer pre-version 9. Of course relying on Javascript to provide this functionality may not always be appropriate, so SPIL provides some alternative markup in the form of reliable old-fashioned divs should you want to use XHTML1.0. For instance if we were marking up a primary navigation element in HTML5 we would use:

<nav class=”primary”> …. </nav>

But should we want to stick with XHTML we could use:

<div class=”nav primary”> … </div>


The development of SPIL has been heavily influenced by Object Oriented CSS (OOCSS) — both the concept and the CSS library. OOCSS encourages the reuse of code in order to enhance performance and keep down CSS file size (also approximating the DRY — Do Not Repeat Yourself  — concept in software engineering). One way to do this is to only style on classes — which can be used any number of times on a page — and not IDs — which can only be used once and also interfere with style inheritance. Class names can be chained together to combine styling effects, reusing predefined styles.

A useful concept in OOCSS is that of “modules”. Although SPIL’s implementation differs from that of the OOCSS library, the ideas are very similar. For instance, we can create a module object for a common design pattern, a tabbed display that can be plugged straight into a page template:

<div class=”mod tabs”>
 <ul class=”tabControls inline”>
  <li class=”tabControlHeader”><a href=”#tab1”>Tab 1</a></li>
  <li class=”tabControlHeader”><a href=”#tab2”>Tab 2</a></li>
 <div class=”tabPanes”>
 <section class=”tabPaneItem” id=”tab1”>Tab 1 content</section>
 <section class=”tabPaneItem” id=”tab2”>Tab 2 content</section>

The structure for this module within the identifying div is built around what jQuery Tool’s implementation of tabs would expect but the class names could also be applied to other implementations. To use this code with jQuery Tools we would simply include a line in our Javascript file, e.g.:

$(".tabControls").tabs(".tabPanes > section");

An advantage of taking a modularised approach to code is we can start to build a library of predefined code snippets that can be slotted in place by anyone involved in interface building, from UI designers and programmers wanting to create a functional prototype through to front-end developers working on the final site build.

Development of SPIL

SPIL is being developed iteratively alongside new web projects within DDH. We’re feeding the work straight into an open source project which we hope will be available for release soon. If you have any comments or if there’s anything you’d like to see in the framework, why not less us know via the comments?