Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

2,687 views

Published on

We look at how to take advantage of domain literacy to 'shortcut' the communication process.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,687
On SlideShare
0
From Embeds
0
Number of Embeds
917
Actions
Shares
0
Downloads
82
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

  1. 1. 2013 Game Design 2 Lecture 6: Semiotics & Icons http://gcugd2.com Sunday, 3 November 13 david.farrell@gcu.ac.uk
  2. 2. Reading • Duarte p44 - p61 (icon stuff) • These two short articles: • http://bit.ly/t5CK8s (Bejewelled 1) • http://bit.ly/tEfaaC (Bewjewlled 2) Sunday, 3 November 13
  3. 3. Semiotics A sign is “something that stands for something to someone in some capacity” Sunday, 3 November 13
  4. 4. Sunday, 3 November 13
  5. 5. Literacy • Literacy is normally thought of as the ability to read and write. • But - you can interpret meaning from other stimuli than just text. • art, music, film, fashion, advertising • Many mediums convey more through images than text Sunday, 3 November 13
  6. 6. Reading & Writing • You don’t just read, you read or write something in some way. • newspaper vs rap • essays vs fiction • Each domain has its own rules & requirements • These can be considered separate literacies Sunday, 3 November 13
  7. 7. What does this mean? “The guard dribbled down court, held up two fingers and passed to the open man.” Sunday, 3 November 13
  8. 8. Semiotic Domains • Within each domain, all sorts of things can take on meaning. • Someone can be musically literate without knowing how to read notation. • they are part of a different semiotic domain Sunday, 3 November 13
  9. 9. Games Literacy Sunday, 3 November 13
  10. 10. Game Domains • Game literacy is really an umbrella term for many sub domain literacies. • FPS game domain expectations of a box would differ from a platform game Sunday, 3 November 13
  11. 11. Sunday, 3 November 13
  12. 12. Short Cut • By understanding the meaning of symbols, the designer can avoid the need to explain or teach the player what something does. Sunday, 3 November 13
  13. 13. Sunday, 3 November 13
  14. 14. Cultural Semiotics • Swastika symbol has many meanings but in western culture the association with Naziism is overwhelming. • Possible to cause offence or create meaning where none intended. Sunday, 3 November 13
  15. 15. Sunday, 3 November 13
  16. 16. Sunday, 3 November 13
  17. 17. • Escapist discussed train • http://bit.ly/18QuKV9 • can watch Brenda Brathwaite’s talk on the GDC Vault • http://bit.ly/1aV95jj Sunday, 3 November 13
  18. 18. Game Tells • The decisions you make about your game’s art style convey information to the potential player. • This is not aesthetics this is games design. Sunday, 3 November 13
  19. 19. Sunday, 3 November 13
  20. 20. Sci Fi Corridors • Sci Fi corridors and doors often have angled or curved walls. • In the future, we’ll probably have rectangular walls but the art design isn’t trying to be realistic, it’s trying to communicate. • Desaturated, gloomy colours are often used to imply a grim future environment. Sunday, 3 November 13
  21. 21. Sunday, 3 November 13
  22. 22. Association • People associate and identify themselves with certain things. • Blue for boys, pink for girls • Brands like Apple, The Hundreds have a lot of meaning for people. • The visual style of a game is important. Sunday, 3 November 13
  23. 23. Sunday, 3 November 13
  24. 24. Sunday, 3 November 13
  25. 25. Part 2: Icons • Reading: • Duarte • Gnome Project • Rule of thumb: If you have to think about an icon to ‘get it’, the metaphor is too complex. http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html Sunday, 3 November 13
  26. 26. Rules of Icon Design • 1: An icon should suggest its function. • 2: Icons shouldn’t suggest the name Sunday, 3 November 13
  27. 27. Rules of Icon Design • 3: Avoid text in icons • text provides no metaphor and requires more effort to scan than a good icon. • 4: Don’t rely on information users won’t have • users should be able to predict outcome Sunday, 3 November 13
  28. 28. Rules of Icon Design • 5: Avoid useless information • if you have an icon for the game’s help files, having a pen would mislead implying the creation of documents. Sunday, 3 November 13
  29. 29. Rules of Icon Design • 6: Icons which work as silhouettes work better than those which require detail • 7: Avoid ambiguity • if two icons could represent same function, one should be redesigned Sunday, 3 November 13
  30. 30. Abstract Vs Realistic • It is challenging to design visual representations of some concepts. • Some game functions may represent abstract notions and suit an abstract icon. • Other functions are more specific and realistic and don’t require a distant metaphor. Sunday, 3 November 13
  31. 31. Abstract • Abstract icons are usually shapes that combine to show relationships. Sunday, 3 November 13
  32. 32. Abstract: Flow • Linear Flow: Flow construction that illustrates a process with a definite start and end point. • The Diagram can follow a straight line or be a series of steps along a line. Sunday, 3 November 13
  33. 33. Sunday, 3 November 13
  34. 34. Circular Flow • Flow that represents a continuous process without an end point. • Any closed loop shape could work. Sunday, 3 November 13
  35. 35. Sunday, 3 November 13
  36. 36. Divergent and Convergent • Flow that occurs when two or more elements either collide or separate out form each other as if splitting off. Sunday, 3 November 13
  37. 37. Sunday, 3 November 13
  38. 38. Multidirectional • Flow that expresses complex relationships - flow charts for instance. • Often these flows result from a combination of the preceding types. Sunday, 3 November 13
  39. 39. Sunday, 3 November 13
  40. 40. Abstract: Structure • Matrices - structures that compare data with at least two different data sets. • One set of data can even be a yes / no set of data as in a checklist. Sunday, 3 November 13
  41. 41. Sunday, 3 November 13
  42. 42. Abstract: Trees • Structures that indicate clear hierarchy. • Relationships can be expressed between any number of objects. Sunday, 3 November 13
  43. 43. Sunday, 3 November 13
  44. 44. Abstract: Layers • Structures that show elements that stack or build on each other. • They can depict both hierarchy and sequence. Sunday, 3 November 13
  45. 45. Sunday, 3 November 13
  46. 46. Abstract: Cluster • Overlapping - Clusters that overlap and indicate shared sets, interest, or responsibility. • Sometimes they form a new shape or area within the overlap. Sunday, 3 November 13
  47. 47. Sunday, 3 November 13
  48. 48. Closure • Clusters that emerge when shapes combine to create another shape. • This principle of Gestalt psychology can be useful when expressing the idea that “the sum is greater than the parts.” Sunday, 3 November 13
  49. 49. Sunday, 3 November 13
  50. 50. Enclosed • Clusters that are enclosed and contain at least one element that envelops another. • Grouping in this way indicates which elements are part of a higher order, and which stand alone. Sunday, 3 November 13
  51. 51. Sunday, 3 November 13
  52. 52. Linked • Clusters that are linked as a unifying element to group items. • A unifying element links related groups of items. • It could be a line, shape, or connector of any kind. Sunday, 3 November 13
  53. 53. Sunday, 3 November 13
  54. 54. Abstract: Radiate • From a point radiation occurs when a single directional “burst” emerges from either a graphic or point that has a clear point of origin. Sunday, 3 November 13
  55. 55. Sunday, 3 November 13
  56. 56. With a Core • creates a parent - child relationship. • The outer elements connect with a central element to hold the family together. Sunday, 3 November 13
  57. 57. Sunday, 3 November 13
  58. 58. Without a Core • Implies that the elements connect through proximity or mutual attraction. • They are tied to one central area. Sunday, 3 November 13
  59. 59. Sunday, 3 November 13
  60. 60. Realistic: Pictorial • Process pictorials are snapshots of how things work sequentially as a product or system. Sunday, 3 November 13
  61. 61. Sunday, 3 November 13
  62. 62. Reveal • An illustration of hidden information shown by slicing, peeling or otherwise exposing a thing’s inner workings Sunday, 3 November 13
  63. 63. Sunday, 3 November 13
  64. 64. Direction • Showing where to go or how to get somewhere. • Usually feature a starting location and destination, and may contain directions. Sunday, 3 November 13
  65. 65. Sunday, 3 November 13
  66. 66. Location • Showing where something is in the context of geography, topography, system, or shape. • These diagrams call attention to a specific location while providing context. Sunday, 3 November 13
  67. 67. Sunday, 3 November 13
  68. 68. Influence • Demonstrating the resulting impact of various interacting elements. Sunday, 3 November 13
  69. 69. Sunday, 3 November 13
  70. 70. Realistic: Displaying Data • Comparison icons juxtapose two or more sets of information to illustrate differences. • Bar graphs, pie charts and other methods are suitable. Sunday, 3 November 13
  71. 71. Sunday, 3 November 13
  72. 72. Trend • One parameter of data represents time, to indicate a trend. • Change over time is the most important aspect of these diagrams. Sunday, 3 November 13
  73. 73. Sunday, 3 November 13
  74. 74. Distribution • Expression of a pattern in seemingly disparate data. • Whether a scatter plot, bell curve or other model, distribution diagrams correlate singular instances into a larger pattern. Sunday, 3 November 13
  75. 75. Sunday, 3 November 13

×