{"id":299,"date":"2015-05-01T08:05:28","date_gmt":"2015-05-01T08:05:28","guid":{"rendered":"http:\/\/blog.soton.ac.uk\/eventhive\/?p=299"},"modified":"2015-05-01T13:10:42","modified_gmt":"2015-05-01T13:10:42","slug":"the-eventhive-interface-conceptual-wireframes","status":"publish","type":"post","link":"https:\/\/blog.soton.ac.uk\/eventhive\/2015\/05\/01\/the-eventhive-interface-conceptual-wireframes\/","title":{"rendered":"The EventHive Interface: Conceptual Wireframes"},"content":{"rendered":"<p>As discussed by Jack in a recent post, the highly thematic nature of EventHive leaves much to play with when designing a basic Graphical User Interface, particularly given the name\u2019s strong connotations with hexagonal-patterned hives, large swathes of activity and a sleek and shiny feel. A number of sketches were therefore made and discussed by the group, before the best were formalised into the following wireframes.<\/p>\n<p>As it was envisaged the majority of traffic for the network would be via the mobile phone application, attention was paid particularly to its wireframe design as below, with the principles easily convertible to a desktop browser application which would be developed in parallel with the mobile application.<\/p>\n<p><strong>The Event Feed Interface<\/strong><\/p>\n<p>One of the critical features of the EventHive network due to its crucial role in driving event attendance, the Feed\u2019s interface was designed to appear highly, active and dynamic to incur a \u201cspur-of-the-moment\u201d feeling which played on users\u2019 \u201cFear of Missing Out\u201d, while striking a fine balance between maximising content and being overstuffed.<\/p>\n<p><a href=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfeed.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-300 aligncenter\" src=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfeed-300x292.png\" alt=\"eventfeed\" width=\"300\" height=\"292\" srcset=\"https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfeed-300x292.png 300w, https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfeed.png 535w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>The Event Hive Interface<\/strong><\/p>\n<p>The event directory element of the EventHive network, the theme of a hive is exploited to demonstrate the interconnections between events.<\/p>\n<p><a href=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventhive.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-301 aligncenter\" src=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventhive-258x300.png\" alt=\"eventhive\" width=\"258\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventhive-258x300.png 258w, https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventhive.png 470w\" sizes=\"auto, (max-width: 258px) 100vw, 258px\" \/><\/a><\/p>\n<p>Tapping on one of the event filters will zoom in on (shading the rest of the screen) the following sub-hive, playing on the almost fractal honeycomb nature of hive design.<\/p>\n<p><a href=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfilter.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-302 aligncenter\" src=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfilter-286x300.png\" alt=\"eventfilter\" width=\"286\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfilter-286x300.png 286w, https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventfilter.png 405w\" sizes=\"auto, (max-width: 286px) 100vw, 286px\" \/><\/a><\/p>\n<p>It is in the event sub-hive where the effect of buzz count and recommender systems really comes into play, with more central locations in the hive making them more likely to be selected.<\/p>\n<p><strong>The Event Page<\/strong><\/p>\n<p>Tapping on an event brings up its event page:<\/p>\n<p><a href=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventpage.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-303 aligncenter\" src=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventpage-300x295.png\" alt=\"eventpage\" width=\"300\" height=\"295\" srcset=\"https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventpage-300x295.png 300w, https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/eventpage.png 449w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Loosely based off the design of Google Circles, it is a way of accessing all the information, multimedia content uploaded, attendees list and discounts of events. It may be also be used to check into an event via GPS, and thus gain redeemable points.<\/p>\n<p><strong>More Traditional Interfaces<\/strong><\/p>\n<p>The <strong>profile page <\/strong>is similar to that of the event page, with profile picture and information at the centre (and tappable to discover more), and surrounding segments containing friends lists, events attended, multimedia content uploaded, and contact details\/integration with other social networks.<\/p>\n<p>The <strong>points screen <\/strong>resembles a simple scrollable list-style shopping centre, similar to those of mobile applications like Amazon (see below):<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/amazonmobile.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-304 aligncenter\" src=\"http:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/amazonmobile-189x300.png\" alt=\"amazonmobile\" width=\"189\" height=\"300\" srcset=\"https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/amazonmobile-189x300.png 189w, https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/amazonmobile-646x1024.png 646w, https:\/\/blog.soton.ac.uk\/eventhive\/files\/2015\/05\/amazonmobile.png 757w\" sizes=\"auto, (max-width: 189px) 100vw, 189px\" \/><\/a><em>From http:\/\/mobilemarketingmagazine.com\/wp-content\/uploads\/2014\/07\/Amazon-Mobile-Site.png<\/em><\/p>\n<p>In accordance with its gameification purpose, graphical features such as <strong>leaderboards<\/strong> (for example, \u2018most points accrued in last week\u2019 across your friends list) and graphical features are likely to be implemented. Likewise, <strong>organisers\u2019 analytics features<\/strong> are assumed to be relatively standard in-keeping with modern expectations.<\/p>\n<p>Browser-based implementations of these interfaces are intended to be simple conversions of the themes, perhaps offering greater amounts of content on-screen as opposed to the rather minimal mobile application\u2019s affordances.<\/p>\n<p>Given the conceptual nature of the designs, it is highly likely that, as content and features are added and removed from Event Hive, these will only form the very basis of the final product. Nevertheless, we believe that by sticking closely to the Hive branding thematically, we have provided a cohesive, sleek, intuitive and interesting Graphical User Interface which forms a solid foundation in accordance with the Hive branding, in turn providing a formidable basis of a networking community.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As discussed by Jack in a recent post, the highly thematic nature of EventHive leaves much to play with when designing a basic Graphical User Interface, particularly given the name\u2019s strong connotations with hexagonal-patterned hives, large swathes of activity and a sleek and shiny feel. A number of sketches were therefore made and discussed by [&hellip;]<\/p>\n","protected":false},"author":326,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[960504],"tags":[6502,145880,996189,996583,867868,995417,378776,995790,535555,717360,921846],"class_list":["post-299","post","type-post","status-publish","format-standard","hentry","category-design-engineering","tag-design","tag-event","tag-event-feed","tag-event-hive","tag-eventhive","tag-graphical","tag-interface","tag-page","tag-theme","tag-user","tag-wireframes"],"_links":{"self":[{"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/users\/326"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":1,"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/posts\/299\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/eventhive\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}