IMPROVING VISUAL INFORMATION
STEP 1
A STEP-BY-STEP MODEL FOR A USER CENTERED DESIGN
41. total: (total costs) box 4: 16. toLeDo (name of arrival station) STEP 1 42. IvA 10% (could be 32. Coche: (Coach) 17. 10.53 (arrival time) ViSual ElEmEnTS on ThE Train TickET Make a numbered list other reduction/additi 33. Plaza: (seat) 18. Producto: (product name) Above the boxes: of all ‘visual elements’. 43. ***12,10 (Price in e 34. el embarque en Pta. De Atocha es por la 19. AvANt (name of the product: Avant is a fast 1. Renfe (company logo). The main aim of this list is to 44. ****0,00 (administ planta baja. (this means something like: ‘In train) 2. billete + Reserva (title, description of type of 45. ***12,10 (total cos Pta. De Atocha, you can board the train at the 20. 08302 (train number?) document) have a description of all the 46. **1,10 (Percentage downstairs level.’) box 2: 3. CoNseRvese PARA LA vUeLtA (instruction visual elements that appear (something strange he • there does not seem to be a relation be21. Coche: (coach/coach number) for passengers to keep the ticket during the IvA 10% is printed too tween 32-33 and 34? 22. 4 (number of the coach) journey). on a document. A numbered it overlaps with the nu • box 3 and box 4 could be used for another 23. tURIstA (probably ‘class’? to separate it 4. LoC.: U47WxvWJ (no idea what this means list also makes it possible however, the **1,10 ra journey, but that has been replaced by the from ‘business’?) or why it is there.) prices? this leaves two warnings/instructions. 24. Plaza: (seat) 5. vCx (no idea) to quickly refer to elements line: the location of th 25. 17b (seat number) 6. AQbe4869 3974 (I think that they belong in the next steps. The list of vertical line.) stAmP 26. seNtADA (no idea, it means ‘sitting’? to together: no idea) visual elements is not in any the teAR oFF PARt. 35. over box 3 and 4, there is a stamp with the separate it from ‘standing’?) 7. 31oCt12 09:50 (Date and time of purchase) 47. AQbe4869 3974 (I t text: ‘Informado y conforme el cliente con los (elements 6 and 7 also appear on top of the particular sequence. together: no idea) datos del billete’. (this means something like: box 3: tear-off part). 56. Plaza: (seat) 41. total: (total costs) box 4: • the b (46) mentioned48. after 16. toLeDo (name of arrival station) the *** in front. some sort of ‘heading ‘the infor-client has vAt/deduction/addition STEP 1 31oCt12 09:50 (Da been informed about the dates 27. Fecha: (date) 8. 7514300298197 (no idea) 57. 17b (seat number, same as item 25) 42. IvA 10% (could be vAt, or it could be an32. Coche: (Coach) tion, bu the total price (45)? 17. 10.53 (arrival time) mation’ that appears above the boxes. of there ViSual ElEmEnTS on ThE Train TickET (elements 47 and 48 a the ticket’?) 28. salida: (departure station) 9. Four boxes (Grouping/separating informa58. barcode (to be read by scanner) other reduction/addition?) 33. Plaza: (seat) • highl 18. Producto: (product name) are some horizontal relations between for Above the boxes: main part). 29. Llegada: (arrival station) tion) 59. Fecha (date) 43. ***12,10 (Price in euro) 34. el embarque en Pta. De Atocha es por la tant for 19. AvANt (name of the product: Avant is a fast D. sImILARItY example ‘Fecha’ (10) and ‘31oCt12’ (11), but the boxes: 1. Renfe (company logo). 49. Fecha (Date) UNDeR 30. Producto: (type of product) 60. tren (train) 44. ****0,00 (administrative costs in euro) planta baja. (this means something like: ‘In • Incon train) For the trainticket, the ‘similarity relation’ this is not a pattern. For example the relation 2. billete + Reserva (title, description of type of 50. 21oCt12 (Date of j 36. 016 IDA Y vUeLtA metALICo (no idea? 31. Cierre del acceso al tren 2 minutos antes box 1: 61. Coche (coach) 45. ***12,10 (total costs in euro) Pta. De Atocha, you can board the train at the as: 10.2 20. 08302 (train number?) is particularly problematic. the typography between ‘Precio’ (39) and ‘: ***12,10’ (43) is journey?) document) 51. tren (train) Return de la salida (this means something like: ‘the 10. Fecha: (date) 62. Plaza (seat) 46. **1,10 (Percentage of tax?) downstairs level.’) box 2: consists of 3 differentiations only: text in visually different (space, typesize). 3. CoNseRvese PARA LA vUeLtA (instruction 52.large 08302 (train numb 37. bright fluorescent background (to highlight doors of the train will close two minutes before 11. 31oCt12 (date of the journey) 63. Consider tarifa (tarifclass) the visual (something strange here: it looks as if the text • there does not seem to be a relation beb. CoNC 21. Coche: (coach/coach number) capitals, text in small condensed upper53. andPtA-toL (Abbrevia for passengers to keep the ticket during the something) departure’) 12. salida: (exit, starting point of journey) 64. 016 (no idea – but there is another 016 in IvA 10% is printed too far to the left because tween 32-33 and 34? 22. 4 (number of the coach) lowercase, text in expanded upper and arrival lower station) eLemeN b. PRomINeNCe journey). 38. 07102628617581 (no idea) 13. PtA.AtoChA (name of station) between there does not seem to be a relation between relations element 36) it overlaps with the number (element 37). • box 3 and box 4 could be used for another • Proxim 23. tURIstA (probably ‘class’? to separate it case. there are many more elements that there are some visually prominent elements on (Price) 4. LoC.: U47WxvWJ (no idea what this means 54.are Coche (Coach) 39. Precio: 27-28-29-30 and 31? 14. 10.20 (departure time) 65. the total (total costs?) however, the **1,10 ranges left with the other journey, but that has been replaced by the relateds from ‘business’?) not differentiated from eachother although the ticket. the highlighted box (35), the40. stamp or why it is there.) elements. 55. 4 (coach number, Gastos gestion (administration costs) 15. Llegada: (destination/arrival station) 66. ***12,10 (price in euros) prices? this leaves two spaces at the end of the warnings/instructions. • Prom 24. Plaza: (seat) they have clearly different functions. For exam(37) and the barcode (58). these are not ‘the 5. vCx (no idea) With the list of elements, 67. @@ (no idea) line: the location of the comma’s does create a are mo 25. 17b (seat number) ple, the train number (52) is not different from most important’. the consequence of this is 6. AQbe4869 3974 (I think that they belong • the tear-off also indicates the ticket vertical line.) stAmP most im 26. seNtADA (no idea, it means ‘sitting’? to the coach number (54). that the ‘eye of the user’ is automatically drawn together: no idea) you canpart describe the that relation could be used for a return journey. the teAR oFF PARt. 35. over box 3 and 4, there is a stamp with the • simila separate it from ‘standing’?) to information that is not useful. 7. 31oCt12 09:50 (Date and time of purchase) for some of these elements. 47. AQbe4869 3974 (I think that they belong text: ‘Informado y conforme el cliente con los but the STEP 3 (elements 6 and 7 also appear on top of the There arePAtteRN four relations: bACkGRoUND together: no idea) datos del billete’. (this means something like: • seque box 3: concluSionS tear-off part). C. seQUeNCe 68. proximity, triangular pattern of blue/cream shapes. 48. 31oCt12 09:50 (Date and time of purchase) ‘the client has been informed about the dates ments a 27. Fecha: (date) A. CoNCLUsIoNs AboUt eLemeNts: 8. 7514300298197 (no idea) the sequence of some of the elements is corprominence, 69. c CIt1996. (reference to the manufacturer/ (elements 47 and 48 also appear on top of the of the ticket’?) really re 28. salida: (departure station) • there is hardly any typographical structure 9. Four boxes (Grouping/separating informarectly indicated. For example, the departure sequence, and similarity. printer. main part). 29. Llegada: (arrival station) (many elements look very similar but have diftion) station (13) is mentioned before the arrival 49. Fecha (Date) UNDeR the boxes: STEP 4 30. Producto: (type of product) ferent functions. the use of capitals/lower case station (16), and the coach number (22) is menThis shows if the graphic 50. 21oCt12 (Date of journey, same as item 11) 36. 016 IDA Y vUeLtA metALICo (no idea? anTici 31. Cierre del acceso al tren 2 minutos antes is inconsistent) tioned before the seat number (25). box 1: STEP 2 design is ‘internally 51. tren (train) Return journey?) and d de la salida (this means something like: ‘the • there are no illustrations/images/visual cues other sequential relations are not that clear. 10. Fecha: (date) rElaTionS bETwEEn ThE ElEmEnTS 52. 08302 (train number, same as item 20) 37. bright fluorescent background (to highlight GRoUP doors of the train will close two minutes before apart from the boxes. Why is the first warning ‘keep the ticket during 11. 31oCt12 (date of the journey) consistent’ and if the relations A. PRoxImItY 53. PtA-toL (Abbreviations of departure and something) the tIC departure’) • Repetition of same information the journey’ (3) separated from the other warn12. salida: (exit, starting point of journey) there are some groups on the trainticket that between elements are logical. arrival station) 38. 07102628617581 (no idea) - the pa there does not seem to be a relation between • spanish ings (31 and 34)? on the tear-off strip, why are 13. PtA.AtoChA (name of station) seem to indicate that the information in these 54. Coche (Coach) 39. Precio: (Price) guish b 27-28-29-30 and 31? • No layers, no differentiation for different the numbers (47, 48) put before the departure 14. 10.20 (departure time) groups belongs together. the four boxes, the 55. 4 (coach number, same as item 22) 40. Gastos gestion (administration costs) - the pe users. and arrival station (53)? And why is the 10% 15. Llegada: (destination/arrival station) tear-off strip, the information about costs with 56. Plaza: (seat) 41. total: (total costs) - the person wh box 4: • the boxes give the most important informavAt/deduction/addition (46) mentioned after 16. toLeDo (name of arrival station) the *** in front. some sort of ‘heading infor57. 17b (seat number, same as item 25) 42. IvA 10% (could be vAt, or it could be anentering the pl 32. Coche: (Coach) tion, but this is hardly distinguished. the total price (45)? 17. 10.53 (arrival time) mation’ that appears above the boxes. there 58. barcode (to be read by scanner) other reduction/addition?) - the person wh 33. Plaza: (seat) • highlighted information is probably impor18. Producto: (product name) are some horizontal relations between for 59. Fecha (date) 43. ***12,10 (Price in euro) boarding the tr 34. el embarque en Pta. De Atocha es por la tant for people who check the ticket. 19. AvANt (name of the product: Avant is a fast D. sImILARItY example ‘Fecha’ (10) and ‘31oCt12’ (11), but 60. tren (train) 44. ****0,00 (administrative costs in euro) - the administra planta baja. (this means something like: ‘In • Inconsistent typography. times are indicated train) For the trainticket, the ‘similarity relation’ this is not a pattern. For example the relation 61. Coche (coach) 45. ***12,10 (total costs in euro) costs have been Pta. De Atocha, you can board the train at the as: 10.20 or 09:50. 20. 08302 (train number?) is particularly problematic. the typography between ‘Precio’ (39) and ‘: ***12,10’ (43) is 62. Plaza (seat) 46. **1,10 (Percentage of tax?) - the tax-office downstairs level.’) box 2: consists of 3 differentiations only: text in large visually different (space, typesize). Draw conclusions. 63. tarifa (tarifclass) (something strange here: it looks as if the text made. • there does not seem to be a relation beb. CoNCLUsIoNs AboUt ReLAtIoNs betWeeN 21. Coche: (coach/coach number) capitals, text in small condensed upper and Based on the description of 64. 016 (no idea – but there is another 016 in IvA 10% is printed too far to the left because each of these g tween 32-33 and 34? eLemeNts: 22. 4 (number of the coach) lowercase, text in expanded upper and lower b. PRomINeNCe element 36) it overlaps with the number (element 37). that need to be • box 3 and box 4 could be used for another • Proximity: there are some groups that are 23. tURIstA (probably ‘class’? to separate it case. there are many more elements are there are some visually prominent elements on the visual elements and that their 65. total (total costs?) however, the **1,10 ranges left with the other journey, but that has been replaced by the related, several others are not. from ‘business’?) not differentiated from eachother although the ticket. the highlighted box (35), the stamp relations, it is usually possible 66. ***12,10 (price in euros) prices? this leaves two spaces at the end of the GRoUP oF Peo warnings/instructions. • Prominence: there are some elements that 24. Plaza: (seat) they have clearly different functions. For exam(37) and the barcode (58). these are not ‘the 67. @@ (no idea) line: the location of the comma’s does create a tICket: are more prominent, but these are not the 25. 17b (seat number) ple,to thedraw train number is not different from most important’. the consequence of this is some(52) conclusions • the tear-off part also indicates that the ticket vertical line.) - legal requirem stAmP most important. 26. seNtADA (no idea, it means ‘sitting’? to the coach number (54). that the ‘eye of the user’ is automatically drawn about the quality of the visual could be used for a return journey. the teAR oFF PARt. chase’. (trade le 35. over box 3 and 4, there is a stamp with the • similarity: many visual elements are similar, separate it from ‘standing’?) to information that is not useful. 47. AQbe4869 3974 (I think that they belong - train-compan text: ‘Informado y conforme el cliente con los but they seem to have different functions. design. STEP 3 bACkGRoUND PAtteRN together: no idea) before boardin datos del billete’. (this means something like: • sequence: the sequence of the visual elebox 3: concluSionS C. seQUeNCe 68. triangular pattern of blue/cream shapes. 48. 31oCt12 09:50 (Date and time of purchase) - train-compan ‘the client has been informed about the dates ments as it appears on the ticket does not 27. Fecha: (date) A. CoNCLUsIoNs AboUt eLemeNts: the sequence of some of the elements is cor69. c CIt1996. (reference(46) to the manufacturer/ (elements 47 andsome 48 also on topinforof the (m of the ticket’?) relate to the actions of users. -departments Check of ticke 56. Plaza: (seat) 28. total: salida:(total (departure there is hardly typographical structure -really telling the salesperson about your intended indicated. the departure 41. costs) station) -•the person who any checks the ticket before •rectly the boxes give For the example, most important informavAt/deduction/addition mentioned after the *** in front. sortappear of ‘heading printer. main part). colour, that I’msales at thedor 57. 17b (seat number, same as item 25) 29. IvA Llegada: (arrivalbe station) (many elements look very similar but have difjourney: destination, date of travel, time of station before the arrival 42. 10% (could vAt, or it could be anentering the platform tion, but(13) thisisismentioned hardly distinguished. the total price (45)? mation’ that appears above the boxes. there 49. some Fecha horizontal (Date) ticke UNDeR the (to boxes: STEP 4number of passengers, return date, -forgeable Arriving at pla 58. barcode be read by scanner) 30. Producto: (type of product) functions. usethe of capitals/lower travel, (16), and the coachisnumber (22) is menother reduction/addition?) -ferent the person who the checks ticket before case •station highlighted information probably imporare relations between for 50. 21oCt12 (Date journey, same (11), as item control of sales 36. Fecha 016 IDA Y vUeLtA metALICo (no idea? anTiciPaTion on ThE diffErEnT uSErS 59. (date) 31. ***12,10 Cierre del(Price acceso tren 2 minutos antes is inconsistent) class. tioned seat number (25). 43. in al euro) boarding the train STEP 2 tant forbefore peoplethe who check the ticket. D. sImILARItY example ‘Fecha’ (10)ofand ‘31oCt12’ but11) 51. tren - the vendor/m Return diffErEnT commiSSionErS. embARkING 60. trenjourney?) (train) de la salida (this means something ‘the there are no illustrations/images/visual -and Negotiation about details: clarifications (Can sequential relations times are notare that clear. 44. ****0,00 (administrative costs inlike: euro) -•the administrator who needs to see proofcues that rElaTionS bETwEEn ThE ElEmEnTS •other Inconsistent typography. indicated For the trainticket, the ‘similarity relation’ this is not(train) a pattern. For example the relation 52. 08302‘Precio’ (train number, as item (43) 20) is machines w 37. Coche bright (coach) fluorescent background (to highlight oF PeoPLe Who NeeD to Look At -ing locating the co 61. doors of the (total train will close two minutes before aparthave frombeen the boxes. IGRoUP take a dog on this journey? When is the last Why is the warning ‘keep the ticket during 45. ***12,10 costs in euro) costs made (to reclaim expenses). PRoxImItYproblematic. the typography as: 10.20 orfirst 09:50. isA.particularly between (39) andsame ‘: ***12,10’ 53. PtA-toL (Abbreviations of departure and something) the tICket: cations on the p 62. Plaza (seat) departure’) Repetition ofto same information train back?) the journey’ (3) separated from the other warn46. **1,10 (Percentage of tax?) -•the tax-office check if the costs have been there are groups on the trainticket that consists ofsome 3 differentiations only: text in large visually different (space, typesize). arrival station) STEP 5 Where 38. tarifa 07102628617581 the passenger (it might beand necessary where? 63. (tarifclass) (no idea) there does not seemhere: to beit alooks relation • spanish -- Agreement about journey price. to distinings (31 and 34)? AboUt on the ReLAtIoNs tear-off strip, why are (something strange as ifbetween the text made. seem to indicate that condensed the information these b. CoNCLUsIoNs betWeeN capitals, text in small upperinand 54.PRomINeNCe Coche (Coach) liST acTio 39. 016 Precio: between different of passengers?) of theof train?) Ch 64. (no(Price) idea – but there is another 016 in 27-28-29-30 and 31? • No of layers, differentiation -guish Waiting for sales persontypes to print ticket. the numbers (47, 48) put before the departure IvA 10% is printed too far to the left because each theseno groups has their for owndifferent activities groups belongs the four and boxes, the eLemeNts: lowercase, text intogether. expanded upper lower b. 55. 4 (coach number, same as item elements 22) 40. Gastos the person who sells the ticket -bUYING enteringthe thetIc element 36)gestion (administration costs) users. -- Paying for the ticket arrival station (53)? Andgroups why is the it overlaps with the number (element 37). that need to be supported. tear-off strip, information about costs with •and Proximity: there are some that10% are case. there arethe many more elements that are there are some visually prominent on numbers in the 65. total (total costs?) - Usually, there is a brief explanation and an however, the **1,10 ranges left with the other related, several others are not. not differentiated from eachother although the ticket. the highlighted box (35), the stamp - Check seat nu 66. ***12,10 (price in euros) instruction where to go. prices? this leaves two spaces at the end of the GRoUP oF PeoPLe Who CommIssIoN the • Prominence: there are some elements that they have clearly different functions. For exam(37) and the barcode (58). these are not ‘the 67. @@ (no idea) - Walking away from the sales desk and checkline: the location of the comma’s does create a tICket: are more prominent, but these are not the ple, the train number (52) is not different from most important’. the consequence of this is DURING the Jo • the tear-off part also indicates that the ticket ing the ticket. (destination, price, date) vertical line.) - legal requirement to provide ‘proof of purmost important. the coach number (54). that the ‘eye of the user’ is automatically drawn - it would be ni could be used for a return journey. the teAR oFF PARt. chase’. (trade legislation) • similarity: many visual elements are similar, to information that is not useful. Anticipate the todifferent the train will ar beFoRe embARkING 47. AQbe4869 3974 (I think that they belong - train-company requirement buy a ticket but they seem to have different functions. STEP 3 time). bACkGRoUND PAtteRN - Find the ‘lower level (planta baja)’. (instructogether: no idea) before boarding. (terms of business). • sequence: the sequence of the visual eleconcluSionS C. seQUeNCe users and different LeAvING the t 68. triangular pattern of blue/cream shapes. tion on ticket). 48. 31oCt12 09:50 (Date and time of purchase) - train-company requirements from different ments as it appears on the ticket does not A. CoNCLUsIoNs AboUt eLemeNts: the sequence of some of the elements is corcommissioners. - keep the ticke 69. c CIt1996. (reference to the manufacturer/ - Finding the platform (checking the departure (elements 47 and 48 also appear on top of the departments (marketing requires the logo in really relate to the actions of users. • there is hardly any typographical structure rectly indicated. For example, the departure other purposes printer. time, train number, destination) main part). colour, sales does wantdocument a tamper-proof/not (many elements look very similar but have difstation (13) is mentioned before the arrival Usually, each is from taxes, clai - Is it necessary to stamp the ticket/validate the 49. Fecha (Date) forgeable ticket, administration wants to make STEP 4 ferent functions. the use of capitals/lower case station (16), and the coach number (22) is men‘used’ by different people in travelled, ...) ticket? 50. 21oCt12 (Date of journey, same as item 11) control of sales easy, …) anTiciPaTion on ThE diffErEnT uSErS is inconsistent) tioned before the seat number (25). STEP 2 different contextsoffor different - Walking towards platform (checking the de51. tren (train) - the vendor/manufacturer the ticket-printand diffErEnT commiSSionErS. • there are no illustrations/images/visual cues other sequential relations are not that clear. rElaTionS bETwEEn ThE ElEmEnTS Questions: parture time, train number, destination) 52. 08302 (train number, same as item 20) ing machines wants to upgrade and improve GRoUP oF PeoPLe Who NeeD to Look At apart from the boxes. Why is the first warning ‘keep the ticket during A. PRoxImItY reasons. For each of the - do we really n - At beginning of platform, there is a check53. PtA-toL (Abbreviations of departure and the tICket: • Repetition of same information the journey’ (3) separated from the other warnthere are some groups on the trainticket that elements, and especially the train? or is coa point/scanning of tickets: do I have to wait in arrival station) STEP 5 - the passenger (it might be necessary to distin• spanish ings (31 and 34)? on the tear-off strip, why are seem to indicate that the information in these - isn’t the arriva the queue? (instruction: doors close 2 minutes 54. Coche (Coach) liSTones of acTionS of Each uSEr it is guish between different types of passengers?) • No layers, no differentiation for different the numbers (47, 48) put before the departure groups belongs together. the four boxes, the that are unclear, departure city? before train leaves). 55. 4 (coach number, same as item 22) bUYING the tICket. - the person who sells the ticket users. and arrival station (53)? And why is the 10% tear-off strip, the information about costs with
A lot of ordinary visual information may look alright but fails in actual use. Take the average train ticket: what are the departure and arrival stations? What is the arrival time and what to do with the other numbers that are shown? Is it possible to develop a train ticket that really ‘enables people to act appropriately’ and takes the needs of its users seriously? This step-by-step model shows you how to do this. These seven steps are likely to yield a document that is better understood by a specific user-group. Further testing is necessary to establish this with certainty. The model was used for the MAGO course ‘Financial Information Design’ in 2012-2013 by Karel van der Waarde, professor of Visual Rhetoric.
STEP 1 ViSual ElEmEnTS on ThE Train TickET Above the boxes: 1. Renfe (company logo). 2. billete + Reserva (title, description of type of document) 3. CoNseRvese PARA LA vUeLtA (instruction for passengers to keep the ticket during the journey). 4. LoC.: U47WxvWJ (no idea what this means or why it is there.) 5. vCx (no idea) 6. AQbe4869 3974 (I think that they belong together: no idea) 7. 31oCt12 09:50 (Date and time of purchase) (elements 6 and 7 also appear on top of the tear-off part). 8. 7514300298197 (no idea) 9. Four box 4: boxes (Grouping/separating information) 32. Coche: (Coach) 33. Plaza: (seat) boxel1:embarque en Pta. De Atocha es por la 34. 10. Fecha: planta baja.(date) (this means something like: ‘In 11. 31oCt12 (date theboard journey) Pta. De Atocha, youofcan the train at the 12. salida: (exit, starting point of journey) downstairs level.’) PtA.AtoChA station) •13. there does not (name seem toofbe a relation be14. 10.20 (departure tween 32-33 and 34? time) Llegada: (destination/arrival •15. box 3 and box 4 could be used station) for another journey, but that has been replaced by the warnings/instructions.
STEP 2
STEP 3
TRAIN TICKET
station)
) duct: Avant is a fast
mber)
? to separate it
ans ‘sitting’? to
)
ct) 2 minutos antes ething like: ‘the wo minutes before relation between
stAmP 35. over box 3 and 4, there is a stamp with the text: ‘Informado y conforme el cliente con los datos del billete’. (this means something like: ‘the client has been informed about the dates of the ticket’?) UNDeR the boxes: 36. 016 IDA Y vUeLtA metALICo (no idea? Return journey?) 37. bright fluorescent background (to highlight something) 38. 07102628617581 (no idea) 39. Precio: (Price) 40. Gastos gestion (administration costs)
STEP 4
necessary to find out why they are there, for whom, and in which context they are used.
- Check of ticket by Renfe-people: confirmation 56. Plaza: (seat) - telling the salesperson about your intended 41. total: (total costs) - the person who checks the ticket before • the boxes give the most important informavAt/deduction/addition (46) mentioned after the *** in front. some sort of ‘heading inforthat I’m at the right platform at the right time. 57. 17b (seat number, same as item 25) journey: destination, date of travel, time of 42. IvA 10% (could be vAt, or it could be anentering the platform tion, but this is hardly distinguished. the total price (45)? mation’ that appears above the boxes. there - Arriving at platform. 58. barcode (to be read by scanner) travel, number of passengers, return date, other reduction/addition?) - the person who checks the ticket before • highlighted information is probably imporare some horizontal relations between for 59. Fecha (date) class. 43. ***12,10 (Price in euro) boarding the train Atocha es por la tant for people who check the ticket. D. sImILARItY example ‘Fecha’ (10) and ‘31oCt12’ (11), but Make a list of actions embARkING 60. tren (train) - Negotiation about details: clarifications (Can 44. ****0,00 (administrative costs in euro) - the administrator who needs to see proof that mething like: ‘In • Inconsistent typography. times are indicated For the trainticket, the ‘similarity relation’ this is not a pattern. For example the relation for each of the users. - locating the correct traincoach (are there indi61. Coche (coach) I take a dog on this journey? When is the last 45. ***12,10 (total costs in euro) costs have been made (to reclaim expenses). rd the train at the as: 10.20 or 09:50. is particularly problematic. the typography between ‘Precio’ (39) and ‘: ***12,10’ (43) is cations on the platform? Is there a map some62. Plaza (seat) train back?) 46. **1,10 (Percentage of tax?) - the tax-office to check if the costs have been consists of 3 differentiations only: text in large visually different (space, typesize). The easiest way to make this where? Where are the numbers on the outside 63. tarifa (tarifclass) - Agreement about journey and price. (something strange here: it looks as if the text made. a relation beb. CoNCLUsIoNs AboUt ReLAtIoNs betWeeN capitals, text in small condensed upper and list is chronological: before, of the train?) Checking the coach number. 64. 016 (no idea – but there is another 016 in - Waiting for sales person to print ticket. IvA 10% is printed too far to the left because each of these groups has their own activities eLemeNts: lowercase, text in expanded upper and lower b. PRomINeNCe - entering the coach, trying to locate the seat element 36) - Paying for theafter. ticket For this project, it overlaps with the number (element 37). that need to be supported. sed for another • Proximity: there are some groups that are case. there are many more elements that are during, there are some visually prominent elements on numbers in the train above the seats. 65. total (total costs?) - Usually, there is a brief explanation and an however, the **1,10 ranges left with the other placed by the related, several others are not. not differentiated from eachother although the ticket. the highlighted box (35), the stamp just choose one group of - Check seat number (seat number). 66. ***12,10 (price in euros) instruction where to go. prices? this leaves two spaces at the end of the GRoUP oF PeoPLe Who CommIssIoN the • Prominence: there are some elements that they have clearly different functions. For exam(37) and the barcode (58). these are not ‘the people that 67. @@ (no idea) - Walking away fromyou’ve the sales identified desk and checkline: the location of the comma’s does create a tICket: are more prominent, but these are not the ple, the train number (52) is not different from most important’. the consequence of this is DURING the JoURNeY • the tear-off part also indicates that the ticket ingin thestep ticket.4. (destination, price, date) vertical line.) - legal requirement to provide ‘proof of purmost important. the coach number (54). that the ‘eye of the user’ is automatically drawn - it would be nice to know if all is well and that could be used for a return journey. the teAR oFF PARt. chase’. (trade legislation) s a stamp with the • similarity: many visual elements are similar, to information that is not useful. the train will arrive at the arrival time (arrival beFoRe embARkING 47. AQbe4869 3974 (I think that they belong - train-company requirement to buy a ticket el cliente con los but they seem to have different functions. STEP 3 time). bACkGRoUND PAtteRN - Find the ‘lower level (planta baja)’. (instructogether: no idea) before boarding. (terms of business). s something like: • sequence: the sequence of the visual eleconcluSionS C. seQUeNCe LeAvING the tRAIN 68. triangular pattern of blue/cream shapes. tion on ticket). 48. 31oCt12 09:50 (Date and time of purchase) - train-company requirements from different d about the dates ments as it appears on the ticket does not A. CoNCLUsIoNs AboUt eLemeNts: the sequence of some of the elements is corthe Renfe logo is not used in the above Check of ticket by Renfe-people: confirmation telling the salesperson about your intended the person who checks the ticket before • the boxes give the most important informavAt/deduction/addition (46) mentioned after the *** in front. some sort of ‘heading infor- keep the ticket for the return journey (or for 69. c CIt1996. (reference to the manufacturer/ - Finding the platform (checking the departure (elements 47 and 48 also appear on top of the departments (marketing requires the logo in really relate to the actions of users. • there is hardly any typographical structure rectly indicated. For example, the departure description? For which user action would this that I’m at the right platform at the right time. r, same as item 25) journey: destination, date of travel, time of entering the platform tion, but this is hardly distinguished. the total price (45)? mation’ that appears above the boxes. there other purposes: claim money back, deduct printer. time, train number, destination) main part). colour, sales does want a tamper-proof/not (many elements look very similar but have difstation (13) is mentioned before the arrival be relevant? Arriving at platform. ad by scanner) travel, number of passengers, return date, the person who checks the ticket before • highlighted information is probably imporare some horizontal relations between for from taxes, claim vAt back, proof that you - Is it necessary to stamp the ticket/validate the 49. Fecha (Date) forgeable ticket, administration wants to make STEP 4 ferent functions. the use of capitals/lower case station (16), and the coach number (22) is menclass. boarding the train tant for people who check the ticket. D. sImILARItY example ‘Fecha’ (10) and ‘31oCt12’ (11), but travelled, ...) ticket? 50. 21oCt12 (Date of journey, same as item 11) control of sales easy, …) ICo (no idea? anTiciPaTion on ThE diffErEnT uSErS is inconsistent) tioned before the seat number (25). STEP 2 STEP 6 embARkING Negotiation about details: clarifications (Can the administrator who needs to see proof that • Inconsistent typography. times are indicated For the trainticket, the ‘similarity relation’ this is not a pattern. For example the relation - Walking towards platform (checking the de51. tren (train) - the vendor/manufacturer of the ticket-printand diffErEnT commiSSionErS. • there are no illustrations/images/visual cues other sequential relations are not that clear. rElaTionS bETwEEn ThE ElEmEnTS informaTion wiTh ThE maTch ThE locating the correct traincoach (are there indiI take a dog on this journey? When is the last costs have been made (to reclaim expenses). as: 10.20 or 09:50. is particularly problematic. the typography between ‘Precio’ (39) and ‘: ***12,10’ (43) is Questions: parture time, train number, destination) 52. 08302 (train number, same as item 20) ing machines wants to upgrade and improve ound (to highlight GRoUP oF PeoPLe Who NeeD to Look At apart from the boxes. Why is the first warning ‘keep the ticket during A. PRoxImItY acTionS of a SPEcific uSEr-grouP. cations on the platform? Is there a map sometrain back?) the tax-office to check if the costs have been consists of 3 differentiations only: text in large visually different (space, typesize). - do we really need a picture of the whole - At beginning of platform, there is a check53. PtA-toL (Abbreviations of departure and the tICket: • Repetition of same information the journey’ (3) separated from the other warnthere are some groups on the trainticket that In the railway-ticket, the instructions are where? Where are the numbers on the outside Agreement about journey and price. made. b. CoNCLUsIoNs AboUt ReLAtIoNs betWeeN Match the information capitals, text in small condensed upper and train? or is coach 4 enough? point/scanning of tickets: do I have to wait in arrival station) STEP 5 a) - the passenger (it might be necessary to distin• spanish ings (31 and 34)? on the tear-off strip, why are seem to indicate that the information in these grouped together. the first two instructions of the train?) Checking the coach number. ut there is another 016 in 54. Coche Waiting for sales person to print ticket. each of these groups has their own activities eLemeNts: lowercase, text in expanded upper and lower b. (Coach) PRomINeNCe - isn’t the arrival city more important than the (instruction: doors close 2 minutes liST of acTionS ofthe Eachactions uSEr guish between different types of passengers?) • No layers, no differentiation for different the numbers (47, 48) put before the departure groups belongs together. the four boxes, the withthe ofthe a seat the queue? are relevant before departure. If the ticket was entering coach, trying to locate Paying for the ticket that need to be supported. • Proximity: there are some groups that are case. there are many more elements that are there are some visually prominent elements on departure city? shouldn’t this be larger? before train leaves). 55. 4 (coach number, same as item 22) bUYING the tICket. ration costs) - the person who sells the ticket users. and arrival station (53)? And why is the 10% tear-off strip, the information about costs with specific user-group. structured purely chronological, these two numbers in the train above the seats. ?) - Usually, there is a brief explanation and an related, several others are not. not differentiated from eachother although the ticket. the highlighted box (35), the stamp should appear above the train. (the sequence - Check seat will number number). n euros) instruction where to go. GRoUP oF PeoPLe Who CommIssIoN the • Prominence: there are some elements that they have clearly different functions. For exam(37) and the barcode (58). these are not ‘the There be(seat a substantial of the information could follow the sequence - Walking away from the sales desk and checktICket: are more prominent, but these are not the ple, the train number (52) is not different from most important’. the consequence of this is amount of information that of actions of the passenger.) DURING the JoURNeY so indicates that the ticket ing the ticket. (destination, price, date) - legal requirement to provide ‘proof of purmost important. the coach number (54). that the ‘eye of the user’ is automatically drawn Could we provide information that is relevant - it is would nice to knowby if all is well and that eturn journey. chase’. (trade legislation) • similarity: many visual elements are similar, to information that is not useful. notberequired the group to other user actions or expectations? the train will arrive at the arrival time (arrival beFoRe embARkING - train-company requirement to buy a ticket but they seem to have different functions. STEP 3 you’ve selected. Not all For example: time). eRN - Find the ‘lower level (planta baja)’. (instrucbefore boarding. (terms of business). • sequence: the sequence of the visual eleconcluSionS C. seQUeNCe - should you validate your ticket (Italy)? LeAvING theelements tRAIN n of blue/cream shapes. tion on ticket). visual identified in - train-company requirements from different ments as it appears on the ticket does not A. CoNCLUsIoNs AboUt eLemeNts: the sequence of some of the elements is cor- Can the trainticket give the confirmation that - keep the ticket for the return journey (or for nce to the manufacturer/ - Finding the platform (checking the departure departments (marketing requires the logo in really relate to the actions of users. • there is hardly any typographical structure rectly indicated. For example, the departure step 1 are required. Put the you are in the right train? other purposes: claim money back, deduct time, train number, destination) colour, sales does want a tamper-proof/not (many elements look very similar but have difstation (13) is mentioned before the arrival information into the sequence - Are there privacy problems? too much control from taxes, claim vAt back, proof that you - Is it necessary to stamp the ticket/validate the forgeable ticket, administration wants to make STEP 4 ferent functions. the use of capitals/lower case station (16), and the coach number (22) is menby government? travelled, ...) ticket? control of sales easy, …) anTiciPaTion on ThE diffErEnT uSErS is inconsistent) tioned before the seat number (25). in which a person needs to - Walking towards platform (checking the de- the vendor/manufacturer of the ticket-printand diffErEnT commiSSionErS. • there are no illustrations/images/visual cues other sequential relations are not that clear. En ThE ElEmEnTS use it. STEP 7 Questions: parture time, train number, destination) ing machines wants to upgrade and improve GRoUP oF PeoPLe Who NeeD to Look At apart from the boxes. Why is the first warning ‘keep the ticket during dESign ThE informaTion To Show ThiS - do we really need a picture of the whole - At beginning of platform, there is a checkthe tICket: • Repetition of same information the journey’ (3) separated from the other warnps on the trainticket that SEquEncE. train? or is coach 4 enough? point/scanning of tickets: do I have to wait in STEP 5 - the passenger (it might be necessary to distin• spanish ings (31 and 34)? on the tear-off strip, why are t the information in these Design the information the graphic design needs to reflect the actions - isn’t the arrival city more important than the the queue? (instruction: doors close 2 minutes liST of acTionS of Each uSEr guish between different types of passengers?) • No layers, no differentiation for different the numbers (47, 48) put before the departure ther. the four boxes, the to show this of people. departure city? shouldn’t this be larger? before trainsequence. leaves). bUYING the tICket. - the person who sells the ticket users. and arrival station (53)? And why is the 10% ormation about costs with
STEP 5
STEP 6
- the Renfe logo description? Fo be relevant?
STEP 6 maTch ThE in acTionS of a In the railway-ti grouped togeth are relevant bef structured pure should appear a of the informat of actions of th Could we provid to other user ac For example: - should you va - Can the trainti you are in the r - Are there priva by government
STEP 7 dESign ThE in SEquEncE. the graphic des of people.
STEP 7
The graphic design needs to reflect the actions of people.
ALL STEPS STEP 1: Visual elements on the train ticket above the boxes:
1. Renfe (company logo). 2. Billete + Reserva (title, description of type of document) 3. CONSERVESE PARA LA VUELTA (instruction for passengers to keep the ticket during the journey). 4. LOC.: U47WXVWJ (no idea what this means or why it is there.) 5. VCX (no idea) 6. AQBE4869 3974 (I think that they belong together: no idea) 7. 31OCT12 09:50 (Date and time of purchase) (Elements 6 and 7 also appear on top of the tear-off part). 8. 7514300298197 (no idea) 9. Four boxes (Grouping/separating information) box
1:
10. Fecha: (date) 11. 31OCT12 (date of the journey) 12. Salida: (exit, starting point of journey) 13. PTA.ATOCHA (name of station) 14. 10.20 (departure time) 15. Llegada: (destination/arrival station) 16. TOLEDO (name of arrival station)
MAGO AKV|St. Joost
17. 10.53 (arrival time) 18. Producto: (product name) 19. AVANT (name of the product: Avant is a fast train) 20. 08302 (train number?) box
2:
21. Coche: (coach/coach number) 22. 4 (number of the coach) 23. TURISTA (probably ‘class’? to separate it from ‘business’?) 24. Plaza: (seat) 25. 17B (seat number) 26. SENTADA (no idea, it means ‘sitting’? to separate it from ‘standing’?) box
3:
27. Fecha: (date) 28. Salida: (departure station) 29. Llegada: (arrival station) 30. Producto: (type of product) 31. Cierre del acceso al tren 2 minutos antes de la salida (This means something like: ‘The doors of the train will close two minutes before departure’) There does not seem to be a relation between 2728-29-30 and 31?
box
4:
32. Coche: (Coach) 33. Plaza: (seat) 34. El embarque en Pta. De Atocha es por la planta baja. (This means something like: ‘In Pta. De Atocha, you can board the train at the downstairs level.’) • There does not seem to be a relation between 32-33 and 34? • Box 3 and Box 4 could be used for another journey, but that has been replaced by the warnings/ instructions. stamp
35. Over box 3 and 4, there is a stamp with the text: ‘Informado y conforme el cliente con los datos del billete’. (This means something like: ‘The client has been informed about the dates of the ticket’?) under the boxes:
36. 016 IDA Y VUELTA METALICO (no idea? Return journey?) 37. Bright fluorescent background (to highlight something) 38. 07102628617581 (no idea) 39. Precio: (Price)
40. Gastos gestion (administration costs) 41. Total: (total costs) 42. IVA 10% (could be VAT, or it could be another reduction/addition?) 43. ***12,10 (Price in euro) 44. ****0,00 (administrative costs in euro) 45. ***12,10 (total costs in euro) 46. **1,10 (Percentage of tax?) (Something strange here: it looks as if the text IVA 10% is printed too far to the left because it overlaps with the number (element 37). However, the **1,10 ranges left with the other prices? This leaves two spaces at the end of the line: the location of the comma’s does create a vertical line.) THE TEAR OFF PART. 47. AQBE4869 3974 (I think that they belong together: no idea) 48. 31OCT12 09:50 (Date and time of purchase) (Elements 47 and 48 also appear on top of the main part). 49. Fecha (Date) 50. 21OCT12 (Date of journey, same as item 11) 51. Tren (train) 52. 08302 (train number, same as item 20) 53. PTA-TOL (Abbreviations of departure and arrival station)
54. Coche (Coach) 55. 4 (coach number, same as item 22) 56. Plaza: (seat) 57. 17B (Seat number, same as item 25) 58. barcode (to be read by scanner) 59. Fecha (date) 60. Tren (train) 61. Coche (coach) 62. Plaza (seat) 63. Tarifa (tarifclass) 64. 016 (no idea – but there is another 016 in element 36) 65. Total (total costs?) 66. ***12,10 (price in euros) 67. @@ (no idea) • The tear-off part also indicates that the ticket could be used for a return journey.
to indicate that the information in these groups belongs together. The four boxes, the tear-off strip, the information about costs with the *** in front. Some sort of ‘heading information’ that appears above the boxes. There are some horizontal relations between for example ‘Fecha’ (10) and ‘31OCT12’ (11), but this is not a pattern. For example the relation between ‘Precio’ (39) and ‘: ***12,10’ (43) is visually different (space, typesize).
background pattern
c. sequence
a. conclusions about elements:
68. Triangular pattern of blue/cream shapes. 69. c CIT1996. (reference to the manufacturer/ printer.
The sequence of some of the elements is correctly indicated. For example, the departure station (13) is mentioned before the arrival station (16), and the coach number (22) is mentioned before the seat number (25). Other sequential relations are not that clear. Why is the first warning ‘keep the ticket during the jour-
• There is hardly any typographical structure (many elements look very similar but have different functions. The use of capitals/lower case is inconsistent) • There are no illustrations/images/visual cues apart from the boxes. • Repetition of same information • Spanish
b. prominence
There are some visually prominent elements on the ticket. The highlighted box (35), the stamp (37) and the barcode (58). These are not ‘the most important’. The consequence of this is that the ‘eye of the user’ is automatically drawn to information that is not useful.
ney’ (3) separated from the other warnings (31 and 34)? On the tear-off strip, why are the numbers (47, 48) put before the departure and arrival station (53)? And why is the 10% VAT/deduction/addition (46) mentioned after the total price (45)? d. similarity
For the trainticket, the ‘similarity relation’ is particularly problematic. The typography consists of 3 differentiations only: text in large capitals, text in small condensed upper and lowercase, text in expanded upper and lower case. There are many more elements that are not differentiated from eachother although they have clearly different functions. For example, the train number (52) is not different from the coach number (54).
STEP 3: Conclusions
STEP 2: Relations between the elements a. proximity
There are some groups on the trainticket that seem
Breda. Expert Centre Art and Design, Research Group Visual Rhetoric, ekv.akvstjoost@avans.nl Design: Mariette Twilt, conceptversion 1 dd March 2013.
• No layers, no differentiation for different users. • The boxes give the most important information, but this is hardly distinguished. • Highlighted information is probably important for people who check the ticket. • Inconsistent typography. Times are indicated as: 10.20 or 09:50. b. conclusions about relations between elements:
• Proximity: There are some groups that are related, several others are not. • Prominence: There are some elements that are more prominent, but these are not the most important. • Similarity: Many visual elements are similar, but they seem to have different functions. • Sequence: The sequence of the visual elements as it appears on the ticket does not really relate to the actions of users.
STEP 4: Anticipation on the different users and different commissioners. group of people who need to look at the ticket:
- the passenger (it might be necessary to distinguish between different types of passengers?) - the person who sells the ticket
- the person who checks the ticket before entering the platform - the person who checks the ticket before boarding the train - the administrator who needs to see proof that costs have been made (to reclaim expenses). - the tax-office to check if the costs have been made. Each of these groups has their own activities that need to be supported. group of people who commission the ticket:
- legal requirement to provide ‘proof of purchase’. (trade legislation) - train-company requirement to buy a ticket before boarding. (terms of business). - train-company requirements from different departments (marketing requires the logo in colour, sales does want a tamper-proof/not forgeable ticket, administration wants to make control of sales easy, …) - the vendor/manufacturer of the ticket-printing machines wants to upgrade and improve
STEP 5: List of actions of each user buying the ticket
- Telling the salesperson about your intended journey: destination, date of travel, time of travel, number of passengers, return date, class. - Negotiation about details: clarifications (Can I take a dog on this journey? When is the last train back?) - Agreement about journey and price. - Waiting for sales person to print ticket. - Paying for the ticket - Usually, there is a brief explanation and an instruction where to go. - Walking away from the sales desk and checking the ticket. (destination, price, date)
- Check of ticket by Renfe-people: confirmation that I’m at the right platform at the right time. - Arriving at platform.
departure city? Shouldn’t this be larger? - the Renfe logo is not used in the above description? For which user action would this be relevant?
embarking
STEP 6: Match the information with the
- locating the correct traincoach (are there indications on the platform? Is there a map somewhere? Where are the numbers on the outside of the train?) Checking the coach number. - Entering the coach, trying to locate the seat numbers in the train above the seats. - Check seat number (Seat number).
actions of a specific user-group.
before embarking
during the journey
- Find the ‘lower level (planta baja)’. (instruction on ticket). - Finding the platform (checking the departure time, train number, destination) - Is it necessary to stamp the ticket/validate the ticket? - Walking towards platform (checking the departure time, train number, destination) - At beginning of platform, there is a checkpoint/ scanning of tickets: do I have to wait in the queue? (instruction: doors close 2 minutes before train leaves).
- it would be nice to know if all is well and that the train will arrive on time (arrival time).
- Keep the ticket for the return journey (or for other purposes: claim money back, deduct from taxes, claim VAT back, proof that you travelled, ...)
Could we provide information that is relevant to other user actions or expectations? For example: - Should you validate your ticket (Italy)? - Can the trainticket give the confirmation that you are in the right train? - Are there privacy problems? Too much control by government?
questions:
STEP 7: Design the information to show
- do we really need a picture of the whole train? Or is coach 4 enough? - isn’t the arrival city more important than the
this sequence.
leaving the train
In the railway-ticket, the instructions are grouped together. The first two instructions are relevant before departure. If the ticket was structured purely chronological, these two should appear above the train. (The sequence of the information could follow the sequence of actions of the passenger.)
The graphic design needs to reflect the actions of people.