Kiosks & Interactive Displays: Accessibility and User Testing
•Als PPTX, PDF herunterladen•
3 gefällt mir•3,002 views
The document discusses interactive displays and kiosks in libraries. It provides examples of different types of kiosks and displays seen in various libraries, including touchscreen displays showing maps, availability of computers, and digital signage. Guidelines and best practices are presented for designing accessible and usable kiosks, including testing interfaces with users. Various software options and tools for creating digital signage and interactive displays are also listed.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Kiosks & Interactive Displays: Accessibility and User Testing
Ähnlich wie Kiosks & Interactive Displays: Accessibility and User Testing (16)
Mehr von Amanda L. Goodman
Mehr von Amanda L. Goodman (9)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Kiosks & Interactive Displays: Accessibility and User Testing
- 1. Amanda L. Goodman @godaisies Patron Interaction Kiosks & Interactive Displays 1/53
- 2. Amanda L. Goodman @godaisies Amanda L. Goodman User Experience Librarian at Darien Library in CT agoodman@darienlibrary.org @godaisies amandagoodman.com or libux.co 2/64
- 6. Amanda L. Goodman @godaisies Source: Thomas Dowling, Wake Forest University, 2015
- 7. Amanda L. Goodman @godaisies 7/64
- 8. Amanda L. Goodman @godaisies 8/64
- 9. Amanda L. Goodman @godaisies Source: Abby Sesselberg, 2015
- 12. Amanda L. Goodman @godaisies Interactive Photo Display at Vanderbilt University http://bit.ly/1yPoOPV Central Piedmont Community College Policy http://bit.ly/1G6Xw4N Cornell University’s Albert R. Mann Library Policy https://mannlib.cornell.edu/rooms-labs/lobby Hunt Library at NC State’s Video Walls http://bit.ly/1DAAK3D 12/64
- 13. Amanda L. Goodman @godaisies Source: https://instagram.com/p/zPrRuBzYps/
- 14. Digital signage, if deployed properly, tells venue-specific stories, consistently serving up the right content to the right audience at the right time. 39/53 Vern Freedlander, SVC Online, December 2011
- 15. Amanda L. Goodman @godaisies 30% General Content 70% Site Specific Content Source: http://bit.ly/1JeHfRH
- 16. 39/53
- 18. Source: Texas Woman’s University http://www.twu.edu/library/kiosk/
- 20. Source: Grand Valley State University http://labs.library.gvsu.edu/display/
- 22. Source: Wilton Library Association
- 23. Source: Wilton Library Association
- 26. Amanda L. Goodman @godaisies Source: http://bit.ly/1bxTN8R
- 27. To be more accessible, kiosks need a headphone jack, so a blind user can interact with them privately; a keyboard with keys you can find by touch; and correct software applications to make everything work correctly. 39/53 Gregg Vanderheiden, Trace R&D Center at UW-Madison http://bit.ly/1Dfry4d
- 28. Amanda L. Goodman @godaisies E-Accessibility Policy Toolkit for Persons with Disabilities http://bit.ly/1FfFDEJ Usable Gestures for Blind People http://bit.ly/1DD9IZm Simple Gestures Make Kiosks Accessible http://bit.ly/1yUMySR Indoor Navigation Using a Digital Sign System http://bit.ly/1JeWFW4 (Open Access) 28/64
- 30. Amanda L. Goodman @godaisies Stress that you are testing the design NOT the person. Say this repeatedly. Make it so! 30/64
- 31. Amanda L. Goodman @godaisies Have you used a touchscreen kiosk before? What do you expect to learn or discover from using this kiosk? Would the current display [screensaver or default screen] encourage you to explore? Why? How would you find X? Do you know where you are in the building from this map? 31/64
- 32. Amanda L. Goodman @godaisies Where would you find information about X? Now that you have started to use the kiosk, is there anything else you would want to find on it? Are we missing anything? 32/64
- 33. Amanda L. Goodman @godaisies Work in Teams of Two One asks the questions. The other writes. Ask to Film Their Hands Saves time on note taking and gives you video proof of how users act. Encourage Thinking Out Loud You want to know why they’re doing what they do. Offer Compensation Coffee is popular! 33/64
- 35. Amanda L. Goodman @godaisies Samsung Smart Signage TV http://smbz.us/1yV1H6s Monitors TVs Tablets 35/64
- 37. Amanda L. Goodman @godaisies CoolSign http://bit.ly/1JiHcUV Visix http://bit.ly/1Ojbryy FireSign http://firesign.net/ Screenly https://www.screenlyapp.com/ 37/64
- 38. Amanda L. Goodman @godaisies SignageStudio http://bit.ly/1Fiu5Rn Screenly https://www.screenlyapp.com/ Concerto http://www.concerto-signage.org/ Xibo http://xibo.org.uk/ HTML Templates https://creativemarket.com/ IntuiFace http://bit.ly/1zSCG6U 38/64
- 39. Amanda L. Goodman @godaisies Wayfinding by UCDavis http://bit.ly/1d71rra WordPress Digital Signage Solution http://bit.ly/1yZ0H1y Mapplic – Custom Interactive Map WordPress Plugin http://bit.ly/1yZ0wDq Xibo http://xibo.org.uk/ Wayfinding https://www.wayfindingpro.com/ 39/64
- 41. Amanda L. Goodman @godaisies Map it @ WSU http://bit.ly/1Qqb7fJ Creating Computer Availability Maps http://bit.ly/1QqbdE5 How to Build a Computer Availability Map http://bit.ly/1yZ2raS LabStats http://bit.ly/1OMDaCA 41/64
- 42. Amanda L. Goodman @godaisies Lessons in Public Touchscreen Development http://bit.ly/1Hy6hZN Brave NUI World [Book] http://amzn.to/1JzO0Kr Designing Gestural Interfaces [Book] http://bit.ly/1yZ2raS University of York Information Directorate Map http://bit.ly/1GnTp6W 42/64
- 43. Amanda L. Goodman @godaisies RealEyes Display Augustana College, Christine Aden TV + FireSign Software + Evanced Elmhurst Public Library, Catherine E. Ingram Digital Photo Frame + Flash Drive + LCD TV Solvay High School, Katharine St. Laurent Signage Studio Software Norton Public Library, Amanda Viana Source: http://on.fb.me/1JzDxyK
- 44. Amanda L. Goodman @godaisies CoolSign Software Drexel Learning Commons Atrium, Catherine Collins Digital Signage Software + Streaming Media Stick + HDTV Tenafly Public Library, Daniel Lee Visix Software E. H. Butler Library, Leah Galka Monitors + Raspberry Pi + Concerto Signage Wake County (?), Kevin Smith Source: http://on.fb.me/1JzDxyK
- 45. Amanda L. Goodman @godaisies Converted Dell Laptops Tarrant County College, Ayyoub Ajmi Plex Media Server + Rokus + Laptop + JPEGs E. H. Butler Library, Leah Galka Source: http://on.fb.me/1JzDxyK
- 46. Amanda L. Goodman @godaisies Plex Media Server + Rokus + Laptop + JPEGs Rowan Public Library, NC; Edward A. Hirst Raspberry Pi + Monitors + Screenly Software New York City College of Technology, CUNY; Junior Tidal Source: http://bit.ly/1Di87Yt
- 47. Amanda L. Goodman @godaisies Grand Valley State University http://labs.library.gvsu.edu/display/ UMBC Library Information Kiosk http://aok.lib.umbc.edu/kiosk/ Hunt Library at NC State http://www.lib.ncsu.edu/touchscreen/ University of Nebraska Kearney: Ryan Library http://library.unk.edu/kiosk/
- 49. Amanda L. Goodman @godaisies 49/64
- 50. Amanda L. Goodman @godaisies 50/64
- 51. LAS VEGAS AIRPORT Amanda L. Goodman @godaisies 51/64
- 52. LAS VEGAS AIRPORT Amanda L. Goodman @godaisies 52/64
- 53. LAS VEGAS AIRPORT Amanda L. Goodman @godaisies 53/64
- 54. PHILADELPHIA CONVENTION CENTER Amanda L. Goodman @godaisies 54/64
- 55. PHILADELPHIA CONVENTION CENTER Amanda L. Goodman @godaisies 55/64
- 56. PHILADELPHIA CONVENTION CENTER Amanda L. Goodman @godaisies 56/64
- 57. PHILADELPHIA CONVENTION CENTER Amanda L. Goodman @godaisies 57/64
- 58. PHILADELPHIA CONVENTION CENTER Amanda L. Goodman @godaisies 58/64
- 59. Amanda L. Goodman @godaisies 59/64
- 60. Amanda L. Goodman @godaisies 60/64 Created using Four Winds Interactive fourwindsinteractive.com
- 61. Amanda L. Goodman @godaisies 61/64 Created using #tagboard tagboard.com
- 62. Amanda L. Goodman @godaisies 62/64 Requires keyboard input with a roller mouse
- 63. Amanda L. Goodman @godaisies 5/53Source: http://bit.ly/1GdaE8x
- 64. Amanda L. Goodman @godaisies Download the Slides http://bit.ly/1GnTRCe agoodman@darienlibrary.org @godaisies amandagoodman.com or libux.co 64/64 Write-Up of Our Kiosk http://bit.ly/1yV7jgZ
Hinweis der Redaktion
- Disclaimer: I am not promoting any particular type of hardware or software. There are three main terms which can be used throughout this presentation: kiosk, interactive display, and digital signage. Kiosk and interactive display can be interchangeable since the user is interacting, not just consuming information like they would with a digital sign. For simplicity’s sake, I’ll use the term kiosk.
- Here is the kiosk on my Library’s first floor.
- Libraries refer to many different services and access points as a kiosk. It may mean any public computer, print station, website, LibGuides, exhibits, self checkouts, download station, lockers, staff desks. Source: lots of Googling for kiosks & interactive displays Along with interactive displays which is what we’ll spend most of our time talking about today Be warned: once people start to use touchscreens in their personal lives, it becomes the expectation that all screens will be controlled by touch.
- Before you start investing money into creating or purchasing a kiosk system, define what purpose the kiosk will serve. The following categories are how I define kiosk purposes, so your definition may vary. A kiosk is not limited to doing just one thing, you can pick and choose the purpose of your kiosk as needed.
- Bathrooms, computers, study rooms I mean this in the most literate sense. Usually not very dynamic other than perhaps a wayfinding path which will draw you a line between two locations.
- Is there a computer nearby? What events are coming up? More dynamic since these tend to have live data sources. StackMaps, a vendor we use, shows where to find items as you can see in the screenshot.
- Queens Library has a job application kiosk: http://bit.ly/1FebS7i In 2007, Alden Library at Ohio University Libraries attempted video reference. Used web cam to speak with a librarian remotely Ultimately it was not successful – told this on live chat on 4/22/2015 Source: Best Practices in Access Services, edited by Lori L. Driscoll, W. Bede Mitchell, 2009 Physical kiosks: Lockers: http://bit.ly/1FebTrY Pick up items: http://bit.ly/1JbDPiy
- These kiosks are beautiful and a treasure for the libraries they serve. The one pictured here is from Slover Memorial Library in Norfolk, VA Exhibit kiosks are highly interactive and in libraries, their purpose is to invite the user to explore the library’s special collections. You will find them in the Library of Congress, museums, and perhaps at public works of historical interest. Downside: they’re usually designed by an outside group, so they’re expensive.
- Now that you have defined the purpose of your kiosk, you need to decide on the content. If you’re not going to commit to maintaining your kiosk, don’t do it at all. Just like a website or social media, you need to answer the following questions: Who is responsible for the content and makes sure it is accurate and timely? Is the content created by entirely by one person or do different people handle the text, graphics, and video? Is there an editor who checks the accuracy of content? What is the workflow for publishing the content? Is the creator the one who pushes it to the monitor? Do you have a policy about what content will and will not be published? How long will content stay up? You can get these questions from my speaker notes later.
- You can accept submissions from not only within your library, but on your campus, and the larger community. You also need to think about if there’s one person responsible for the kiosks or a whole team. As of January 2013, there was a three member team managing kiosks at West Virginia University. Manager IT person Content Designer Source: Graham II, Spencer W. “Delivering the Message.” American School & University Jan. 2013: 30. Print.
- In 2012, Vanderbilt University’s Central Library had an interactive photo exhibit that was curated by student Emily Cook. That link is to a podcast where she describes her process: http://bit.ly/1yPoOPV Mann Library, content should “publicize academic accomplishments, opportunities, or events” Provide guidelines on how to format the slides https://mannlib.cornell.edu/rooms-labs/lobby Central Piedmont Community College School related services and events only, policies: http://bit.ly/1G6Xw4N Hunt Library’s Video Walls: http://bit.ly/1DAAK3D Hardware: http://bit.ly/1HkXA6t Documentation & templates: http://www.lib.ncsu.edu/videowalls
- Timely and responds to current events
- Source: Freelander, Vern. [title of article unknown – lost the first page of the printout] SVC Dec. 2011: 48. Print. Vern Freedlander issues the directive “Embrace Hyper-Local Content.” This means investing time to make sure that your signage and displays are relevant to the people in your building at specific times of day. Examples: New children’s books and services, and parenting programs before and after storytime Advertise the teen room after school and during holidays/breaks This is a lot of work.
- Source: Graham II, Spencer W. “Delivering the Message.” American School & University Jan. 2013: 30. Print. This method could be applied to a larger library or system by having: General Content: Regular storytime hours Library holiday closing message Annual donation drive Bestseller lists Site Specific content: If you have different branches, the site specific would be events going on at that library
- A best practice coming out of marketing and content strategy. Plan out what content goes up when. If you’re monitoring interactivity with content, go back in and make notes as to how many times a map was clicked on, which videos were played, etc.
- What features you include is based entirely on the purpose of your kiosk, budget, and commitment to maintenance. In this section, we’re going to look at the features mostly cited by patrons at my library.
- Maps can be flat like floor plans, 3D, interactive with wayfinding elements that blink or animate a trail from your location to desired destination. This particular map shows pop-up boxes with photos of the locations when you hover over them.
- Bathrooms, water fountains, quiet space, café Also includes Computers, fax machine, printing
- Cool if you can offer it
- Emailed for verification
- Cool thing here – when you tap on one of these events…. (next slide) The disadvantage of using a propriety vendor is that it’s very locked down and difficult to make changes. ~Thomas
- You get a directional path from the kiosk to location of the event.
- I tried to add events to this original design of the kiosk at Darien Library using Bootstrap. As you can see, I ran into serious issues with the events’ listings. The boxes were meant to toggle down when pressed to show more details. However, all the event boxes for that day would open instead! Our kiosk is missing event listings, catalog access, and real-time availability of computers and study rooms.
- Whoops, forgot to change out this slide image.
- I put out a call in March to find libraries with interactive kiosks. Tara here quickly pointed out something I had overlooked: accessibility. As a web person, I know to watch my Ps and Qs to try and be as accessible of a website as possible. However, I had not given it much thought about the physical interaction of our kiosk aside from making sure the text was big and the location of the buttons was clear. Our kiosk obeys web standards since it’s a website, after all. After this conversation, I did some research on how to do better.
- Simple things which are easy to overlook. How many kiosks have you seen which appeared to make any efforts towards being accessible?
- I highly recommend the second link. Interesting, informative, and gives you steps that you can put into practice right away.
- Photo is from a real user testing session!
- This is fundamental to user experience. The person who is testing your product or concept is NEVER on trial. They are doing you a great favor by testing your assumptions and beliefs. I emphasize this point at least twice during the study.
- Don’t worry about trying to capture all these notes – the slides will be available online.
- Write out a script and stick to it as closely as you can while talking with your participant. This way you can try to ensure that each user is given the exact same opportunity to comment, observe, and use the product. However, if the user says something interesting or surprising, don’t be afraid to follow up on that.
- I am not recommending any particular vendor, hardware, or software in this section. This is just a list of equipment I found through online research.
- This is a weak slide because there are simply far too many options…. Samsung’s is an all-in-one package with TV + software
- As you can see, my coworker wanted to check out the versatility of our touch screen. Here he is playing a racing game using a Playstation. Another game he tested was FIFA Soccer – the graphics were great! Next slides will be text heavy, but that’s again for your benefit later when you download the slides
- Creative Market is where I got the template I based our kiosk off of. Though there are TONS of websites where you can get free templates. However, I like Creative Market because every week they offer 6 free graphic design products (WordPress themes, fonts, graphic design, Photoshop brushes, etc.)
- More details about what UCDavis is doing in the speaker notes: Interactive Wayfinding plugin https://law.ucdavis.edu/information-technology/projects/wayfinding.html Our Interactive Wayfinding Kiosks are built using 46" Samsung DXN screens. The screens have been customized by Horizon Displays, Inc to include an optical multi-touch surface, strengthened glass, and a stainless steel bezel. The screens connect to Samsung's MagicInfo server to enable remote control and scheduling. Each screen has an Apple Mac Mini running Opera in kiosk mode. Opera handles the SVG graphics for the turn by turn directions extremely well. https://github.com/ucdavis/wayfinding/ http://ucdavis.github.io/wayfinding/ WordPress Digital Signage Solution http://www.sixteen-nine.net/2013/08/02/wordpress-digital-signage-platform/ https://github.com/natejones/wpds http://pixelydo.com/work/wordpress-digital-signage/
- Btw, that’s a dancing Carlton gif
- I’m not entirely sure that it’s kosher to list these, but they posted these on a public Facebook group so… These responses were from someone else’s question, but since it was relevant I bookmarked it for this presentation. I found the libraries by looking up people’s LinkedIn profiles (sorry!). The full quotes + links to products are in the presenter notes. Augustana College Christine Aden Our library is part of a larger, multipurpose building (dining services, office of student life, multicultural & international student life, reading/writing center). As a result, we've found the digital signage to be very helpful for advertising any number of things. We use the RealEyes Display program. Solvay High School Katharine St. Laurent I have a digital photo frame that runs off a flash drive and an LCD TV. The frame shows promos or blurbs about award winning books, and the tv shows the daily announcements, although this past week it was co-opted for Yule log duties Elmhurst Public Library 1 big fancy TV running FireSign that hooks up with Evanced Catherine E. Ingram http://firesign.net/ Norton Public Library We used a company to get set up but the software they use is called Signage Studio. We create graphic announcements for programs and services, save them as image files, and add them to a slideshow. We can also add video and there's a small ticker at the bottom that gives upcoming events and a carousel of pictures we set up in an album. We've been very happy with it and our patrons are impressed! http://www.digitalsignage.com/_html/signagestudio.html FREE
- Drexel learning commons atrium We have two very large, static, digital signs in our learning commons atrium, as well as two smaller, static, digital signs in the printing areas. The signs in the printing areas are used to communicate important technical information (mobile printing how-to, technology updates, tech alerts, etc.). The signage in our atrium is used for marketing of campus events, services, and announcements -- although located in our building, other departments can and do post on these, although most of the content is posted by me on behalf of our library. Catherine Collins http://www.haivision.com/products/digital-signage/coolsign E. H. Butler Library Directory Visix, Leah Galka http://www.visix.com/axistv-digital-signage-software.html Tenafly Public Library Daniel Lee http://www.digitalsignage.com/ FREE http://www.amazon.com/Tianle-TL869-Android-Streaming-Media/dp/B00DILTY0U/ref=sr_1_1?ie=UTF8&qid=1419271571&sr=8-1&keywords=android%20stick It's free and it works pretty well. If you are familiar with the metaphors used in non-linear video editing, you will figure it out pretty quickly. The signage editor is Adobe Air App which makes it a little janky but... For playback, I bought one of these: http://www.amazon.com/Tianle.../dp/B00DILTY0U/ref=sr_1_1... Plugged it into an HDTV and downloaded the digital signage app from the Google play store. You can preview my sign here: http://pluto.signage.me/WebService/SignagePlayerApp.html... It doesn't load perfectly in the browser, but you get the idea. Kevin Smith We have monitors hooked up to Raspberry Pi ' at all 20 libraries. We use the open source Concerto signage, and administer it all centrally. We can make feeds for regional vs community, etc. We can put in publish and unpublished dates. It all works pretty well. http://www.concerto-signage.org/
- The first gentleman wrote up a very detailed open access article about his process which you should read about: http://www.libraryinnovation.org/article/view/309/551 Tarrant County College In my previous library (tccd.edu) I converted 30 old Dell laptops into digital displays used for way findings, events, and digital exhibits. Cost < $20 each I published an article about the project and step-by-step tutorials. It's easy, cheap and has been working for over 2 years now. Link to article and some photos here http://ayyoubajmi.com/.../extra/91-repurposed-laptop-project feel free to get in touch if you need more information. http://ayyoubajmi.com/index.php/extra/91-repurposed-laptop-project Ayyoub Ajmi
- Same deal – someone asked on the LITA listserv and these were some responses. Rowan Public Library NC We are using a Plex Media Server feeding 3 Rokus over a wireless connection from a laptop. We use .jpg pictures for our slides. Each Roku is connected to a different folder on the Plex server since our displays are in different parts of the building. Edward A. Hirst On Dec 22, 2014, at 2:20 PM LITA listserv City Tech We used two templates for our digital sign. We were using PowerPoint on a Windows machine. Librarians would take turns updating the slides to promote databases, workshops, library hours, etc., and we had a stable of maybe a dozen or so slides. We updated the slides whenever we needed to promote specific events, usually a couple of weeks before it took place. This past summer, we switched to using a Raspberry Pi setup installed with Screenly -https://www.screenlyapp.com/ose.html . This made it much easier to update the slides, because we couldn't remotely login into the PC with Powerpoint running. Now, we can connect to the RPi/Screenly, and upload images. Best, Junior Tidal New York City College of Technology, CUNY On Dec 22, 2014, at 1:10 PM LITA listserv
- Not sure if these libraries know that I found them – aside from Grand Valley, but… here you go!
- Get inspiration where you can find it! Look to: Retail Colleges/Universities Museums Zoos Art Galleries Artists Interactive Window Displays Graphic Design Sharing Sites like Dribbble and Behance
- Special feature: When you choose a location to visit, an animated path lights up and shows that you need to go between floors or around corners.
- Some of these photos illustrate the importance of thinking about sunlight hitting the screens before you put them up as you can see from these photos. Special feature: The middle picture of how they display different levels is interesting.
- Special feature: Narrowly focuses on the top four things you want to do.
- Special feature: Grid layout of local events. Created using ettractions.com – double Ts
- Special feature: The YOU ARE HERE pulses
- Special feature: When you tap on a restaurant on the right, its icon on the map to the left lights up which invites you to touch it to learn more. I THINK
- Special feature: Gives options for sending information to you.
- Airports, hotels, bus stations
- This is the vertical version. Special feature: Highlights six main options.
- Airports, hotels, bus stations
- Airports, hotels, bus stations
- And finally, let’s look at an astonishing example from the Cleveland Museum of Art…
- I looked at dozens of interactive displays, digital signs, and kiosks while researching this presentation. This interactive gallery was the most breathtaking one. Just go look it up – no single picture will do it justice. Good read: http://www.fastcodesign.com/1671845/5-lessons-in-ui-design-from-a-breakthrough-museum