Building a transit website around user needs - CalACT 2016 spring presentation
Download as PPTX, PDF0 likes230 views
The document outlines the essential elements for building a user-centered transit website, emphasizing accessibility and real-time information. It discusses design strategies, such as wireframes, navigation simplicity, and the importance of mobile compatibility, while providing examples of effective transit websites. Additionally, it highlights the role of analytics, social media, and service alerts in enhancing user experience and engagement.
![Service Alerts
● Your customer service department can manage service alerts
● Requires a web-based tool to translate from human-readable format:
○ “Route 5 is experiencing significant delays due to flooded roads”
...to a machine-readable format like GTFS-realtime Service Alerts[1]:
header {
gtfs_realtime_version: "1.0"
timestamp: 1450386709
}
entity {
id: "1"
alert {
informed_entity {
agency_id: "Hillsborough Area Regional Transit"
}
header_text {
translation {
text: "Route 5 delays"
language: "en"
}
}
description_text {
translation {
text: "Route 5 is experiencing significant delays due to flooded roads"
language: "en"
}
...
[1] https://developers.google.com/transit/gtfs-realtime/service-alerts?hl=en](https://image.slidesharecdn.com/calact2016springpresentation-websites-160830191609/85/Building-a-transit-website-around-user-needs-CalACT-2016-spring-presentation-57-320.jpg)
![How to share vehicle positions and arrival estimate data?
1. Include RFP language requesting GTFS-realtime[1] or SIRI[2] Application Programming Interface (API) when
procuring an AVL system
○ Make sure you retain ownership of your data
○ Require that your real-time IDs match your schedule GTFS data
○ Require that your GTFS and GTFS-realtime data are updated in sync
○ Request the timepoint field in stop_times.txt - it’s increasingly important for real-time
2. Prior to accepting product, test API with at least one app
○ e.g., Google Maps
Already have an AVL system, but not a realtime API?
● A good read - “Legacy AVL system? It’s okay, join the club,” https://kurtraschke.com/2015/01/legacy-avl-export
● Open-source converters:
○ GTFS-realtime - https://github.com/luqmaan/awesome-transit#gtfs-realtime
○ SIRI - https://github.com/luqmaan/awesome-transit#siri
[1] https://developers.google.com/transit/gtfs-realtime/
[2] https://en.wikipedia.org/wiki/Service_Interface_for_Real_Time_Information](https://image.slidesharecdn.com/calact2016springpresentation-websites-160830191609/85/Building-a-transit-website-around-user-needs-CalACT-2016-spring-presentation-62-320.jpg)
Building a transit website around user needs - CalACT 2016 spring presentation
- 1. Building a transit website around user needs Aaron Antrim Trillium | www.trilliumtransit.com aaron@trilliumtransit.com | 503-567-8422
- 2. 1.Transit websites from the perspective of their users 2.Accessibility for all 3.Find out what people click -Using Google Analytics 4.Making the most of the website
- 3. Users’ perspective Riders Board members, media, etc. Questions: ‣ What route & schedule do I use? ‣ Real-time: When does my bus come? ‣ What is the fare? Policies? Questions: ‣ Latest board agenda & minutes? ‣ Planning documents ‣ About the agency ‣ Staff names & contact
- 4. Users’ perspective ๏ Riders ‣ New riders vs. existing riders ‣ Residents vs. visitors ๏ Board members, media, etc.
- 5. Design a storefront display Showcase what you offer, such as: ‣The transportation network itself ‣Freedom & mobility ‣Affordability
- 8. Administrative & board info highlighted in purple
- 9. First step: Create a “wireframe” to prioritize limited screen real estate
- 12. Selected websites Design ideas for transit
- 13. bart.gov • homepage does not require scrolling • highly multi- lingual • captures BART brand with colors and shapes
- 15. Alaskaair.com • Simple navigation at the top • Clean / corporate • Destination-based marketing beneath the fold • Mobile-ready
- 19. delta.com • primary “trip tools” float above feature image • very consistent branding (Delta Airlines colors, etc.)
- 20. LA Metro What not to do: Transit website as a maze
- 23. mendocinotransit.org • homepage offers effective “service overview” • scenic backdrop image • consistency with printed information • key information is “above-the-fold” • Clean but scenic & friendly
- 24. sctransit.com • simplified navigation with “pop-open” drawers • big, central splash image • consistency with Sonoma County Transit brand through colors, line elements • Clean/corporate look
- 27. squareup.com • example of current simple & direct style for websites
- 28. trimet.org Old website; recently revised • busy homepage, probably overloaded • nice pop-out drawer navigation • rider testimonials on the homepage • interactive map & trip planner is featured
- 30. Trimet.org
- 32. Mobile view
- 33. Friendly about section beneath the fold.
- 35. Eldoradotransit.com: • Brand consistency • Simplicity • Information-rich map
- 42. Most users will see your website on their mobile phone.
- 43. More than 75% of users to sctransit.com are mobile
- 48. Our customers didn’t sign up for an easter egg hunt.
- 51. Social media: Another field on which to hide easter eggs?
- 52. Social media Proceed with caution! Don’t encourage people to leave your website for a lower- quality experience. Good for: * Community engagement * Customer service Bad for: * Organizing service alerts and essential information More discussion: http://bit.ly/transit-communication
- 55. What is Real-time information? ● Vehicle Positions ● Real-time arrival estimates (trip updates) ● Service alerts Route 5 is experiencing significant delays due to flooded roads
- 56. ● Vehicle Positions ● Real-time arrival estimates (trip updates) ● Service alerts Real-time information sources Require automatic vehicle location (AVL) hardware on buses Can be managed via web-based customer service tools Route 5 is experiencing significant delays due to flooded roads
- 57. Service Alerts ● Your customer service department can manage service alerts ● Requires a web-based tool to translate from human-readable format: ○ “Route 5 is experiencing significant delays due to flooded roads” ...to a machine-readable format like GTFS-realtime Service Alerts[1]: header { gtfs_realtime_version: "1.0" timestamp: 1450386709 } entity { id: "1" alert { informed_entity { agency_id: "Hillsborough Area Regional Transit" } header_text { translation { text: "Route 5 delays" language: "en" } } description_text { translation { text: "Route 5 is experiencing significant delays due to flooded roads" language: "en" } ... [1] https://developers.google.com/transit/gtfs-realtime/service-alerts?hl=en
- 58. Service Alerts Publishing Tools Google Transit Partner Dash: ● Freely available ● Publishes alerts only to Google Maps
- 59. Service Alerts Publishing Tools Trillium Transit Alerts: ● Available as product from Trillium ● Publishes alerts to any app supporting GTFS- realtime Service Alerts ○ Google Maps ○ The Transit App ○ OpenTripPlanner ○ OneBusAway ● Target alerts to particular routes and stops ● Also offers integration to publish same alerts to: ○ Websites ○ Social media accounts ○ Email, SMS, and other Alerts More info at http://trilliumtransit.com/gtfs/transit-alerts/
- 60. Service Alerts Publishing Tools IBI TRANSIT-alerts: ● Available as product from IBI Group ● Publishes alerts to any app supporting GTFS- realtime Service Alerts ○ Google Maps ○ The Transit App ○ OpenTripPlanner ○ OneBusAway ● Target alerts to particular routes and stops ● Also offers integration to publish same alerts to: ○ Websites ○ Social media accounts ○ Email, SMS, and other Alerts More info at http://transitrealtime.com/docs/IBI_TRANSIT-alerts.pdf
- 61. Service Alerts Publishing Tools Do-It-Yourself (DIY) open-source tools: ● OneBusAway ○ Part of the main OneBusAway server application - https://github.com/OneBusAway/onebusaway-application- modules/wiki/Creating-Service-Alerts ○ A stand-alone web application - https://www.youtube.com/watch?v=roIsmq9R7Wc, https://github.com/OneBusAway/onebusaway-service-alerts ● GTFS-rt-admin ○ A stand-alone web application - https://github.com/conveyal/gtfs-rt-admin
- 62. How to share vehicle positions and arrival estimate data? 1. Include RFP language requesting GTFS-realtime[1] or SIRI[2] Application Programming Interface (API) when procuring an AVL system ○ Make sure you retain ownership of your data ○ Require that your real-time IDs match your schedule GTFS data ○ Require that your GTFS and GTFS-realtime data are updated in sync ○ Request the timepoint field in stop_times.txt - it’s increasingly important for real-time 2. Prior to accepting product, test API with at least one app ○ e.g., Google Maps Already have an AVL system, but not a realtime API? ● A good read - “Legacy AVL system? It’s okay, join the club,” https://kurtraschke.com/2015/01/legacy-avl-export ● Open-source converters: ○ GTFS-realtime - https://github.com/luqmaan/awesome-transit#gtfs-realtime ○ SIRI - https://github.com/luqmaan/awesome-transit#siri [1] https://developers.google.com/transit/gtfs-realtime/ [2] https://en.wikipedia.org/wiki/Service_Interface_for_Real_Time_Information
- 63. On the horizon - open AVL systems ● Choose your AVL vendor to provide vehicle positions ● TransiTime.org - Create arrival estimates from vehicle positions ● OneBusAway.org - Distribute info to mobile apps ○ iPhone ○ Android ○ Windows Phone ○ Amazon Fire Phone ○ Google Glass ○ SMS, Phone, and more... Gives agencies options and ownership of system
- 64. Accessibility for all More at: http://bit.ly/transit-website-accessibility What is accessibility? • On the web, access for users who are sight-impaired and use screen-reader software. • Federal law (Section 508) defines accessibility requirements.
- 65. Accessibility for all More at: http://bit.ly/transit-website-accessibility How to achieve accessibility • Write good HTML code, follow guidelines (https://www.w3.org/WAI/intro/wc ag) • Use an automated checker such as WAVE (wave.webaim.org) • User testing! Hire a screen- reader user or find a volunteer to use and test your website.
- 66. Accessible Not accessible • Images without “alternate” text • Maps (!!) • Most PDF files • Text in an HTML document • Well-formed tables • Alternate text that accompanies images
- 67. Define “scope” of table headers. <TH SCOPE=”ROW”>Transit Center</TH>
- 68. Issue: When there are multiple dimensions of headers
- 71. Using Google Analytics • Cost-free! • Just insert some code into your website • Configure monthly reports
- 72. What can you discover? • How many people use your website? • How long do they spend on the site? Various pages? • What paths do they take through the website? • Where do they leave? • How do people find your website? • What search terms do they use? • What links do they click on other sites? • What devices and browsers are they using?
- 73. Making the most of a website in your marketing program
- 74. Trinity Transit: It all started with a map…
- 79. Search Engine Marketing (SEO) • Keywords • Links • Partners • Google search referral performance
- 80. Questions? Aaron Antrim Trillium | www.trilliumtransit.com aaron@trilliumtransit.com 503-567-8422 ext 3