{"id":238,"date":"2017-05-04T19:55:21","date_gmt":"2017-05-04T18:55:21","guid":{"rendered":"http:\/\/generic.wordpress.soton.ac.uk\/britizen\/?p=238"},"modified":"2017-05-05T14:22:29","modified_gmt":"2017-05-05T13:22:29","slug":"mobile-and-desktop-responsive-design-mockup","status":"publish","type":"post","link":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/2017\/05\/04\/mobile-and-desktop-responsive-design-mockup\/","title":{"rendered":"Mobile and Desktop Responsive Design Mockup"},"content":{"rendered":"

This post describes the design process and the final mock up screens for the Britizen mobile application. We decided to focus mainly\u00a0on the mobile version for the design mockup as smartphones are now the primary method of accessing the web and internet services in the UK, according to industry monitor Ofcom (2015). All images are to scale and were built using Xcode’s interface builder running on iOS 10.3 on a simulated iPhone 7 but are also designed to be responsive for tablet and desktop, as shown in figure 2.<\/p>\n

Figure 1. Landing Screen\"Screen<\/p>\n

The Britizen logo designed by Luis Cayola in his post<\/a> was utilised throughout the app including the\u00a0dark blue background colour which is used for consistency and to facilitate a more pervasive brand recognition. The landing page follows a minimalist design of all the salient features needed \u00a0for a new user to either sign in using Facebook (see Facebook Integration post) or link to a new account creation page (figure 3). Following from Sue Breeze’s post<\/a> centred around digital inclusion \u00a0the app also incorporates features for people with sight difficulties. These features are the option for larger text throughout the app which is shown as text being over 16pt by the \u00a0Royal National Institute of Blind People (2014). This helps to make our app more inclusive for the elderly and people with impaired vision. To further increase the inclusive scope the app we also opted to support text to speech so that users can navigate using the assistive controls on their system either via a computer keyboard or touch screen keyboard, to navigate the various on screen elements while a text to speech synthesiser will describe each element such as ‘input your email’ or ‘next page button’. These features can also be reconfigured in the settings \u00a0screen. This screen also includes the legal terms and conditions and privacy statement links for users to peruse before signing up as per the\u00a0EU Privacy Directives minimum requirements which states that any app that allows for user account creation that\u00a0stores sensitive information such as personal details like emails and names must show clear and concise terms and conditions and privacy policies, Lubuenda (2016).<\/p>\n

Figure 2.\u00a0Sign Up Screen – responsive for desktop or large tablets
\n\"Screen<\/p>\n

This screen shows that in app elements have been designed with the responsive design paradigm in mind. Each element has been given responsive scale and position parameters that will dynamically adapt to the screen size and operating system of the host device. \u00a0In this example all of the elements have been scaled to the standard 12pt font size as per the Apple iOS Human Interface Guidelines (2017) for typography and text legibility. \u00a0Elements remain centred and visible, relative to the desktop screen width, as well as the terms and conditions text remaining relative to the bottom bounds of the screens as per the original design. These practices are implemented across all of the screen view designs, as scalability is extremely important for a wide reaching inclusive platform such as Britizen.<\/p>\n

Figure 3.\u00a0Sign Up Screen
\n\"Screen<\/p>\n

This is just a simple screen for account creation that allows the user to create their own account based on their personal email address as opposed to simply signing in with Facebook. This again makes the app more inclusive as it is not just targeted on users with Facebook accounts. This is to avoid any bias towards very young and old users who are statistically less likely to have a Facebook account according to leading online market research firm Jetscram’s Social Media User Statistics & Age Demographics for 2014 shown in figure 4.<\/p>\n

Figure 4. Social Media User Statistics & Age Demographics for 2014 taken from\u00a0http:\/\/jetscram.com\/blog\/industry-news\/social-media-user-statistics-and-age-demographics-2014\/<\/p>\n\n\n\n\n\n\n\n\n
Facebook Age Demographic<\/th>\nNumber of Users<\/th>\nPercentage of User Base<\/th>\n<\/tr>\n
13-17<\/td>\n9.8 Million<\/td>\n5.4%<\/td>\n<\/tr>\n
18-24<\/td>\n42 Million<\/td>\n23.3%<\/td>\n<\/tr>\n
25-34<\/td>\n44 Million<\/td>\n24.4%<\/td>\n<\/tr>\n
35-54<\/td>\n56 Million<\/td>\n31.1%<\/td>\n<\/tr>\n
55+<\/td>\n28 Million<\/td>\n15.6%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Figure 5. Welcome Screen
\n\"Screen<\/p>\n

The welcome screen shows a personalised message to the user if they have logged in with Facebook using their display name and Facebook profile picture, this is employed to create a personal bond with the user, as calling people by their first name has been shown\u00a0to solidify human relationships as outlined\u00a0by the book Maximum Influence: The 12 Universal Laws of Power Persuasion, increasing the user’s connection and warm feelings towards our app. The user is also presented with their Britizen Score or BP, this score visualisation was built using the D3 visualisation framework which is fantastic for displaying multi-faceted information in segmented views. The user can also look at their recent achievements, this was included to compound the practical usefulness\u00a0of the platform to the user to increase their motivation to keep using Britizen in the future. The users can then select a link to be forwarded to the main screen which includes a tabulated view of the main”feed”, “groups” and “Score” views.<\/p>\n

Figure 6. Main Screen – Feed
\n\"Screen<\/p>\n

This view shows the main layout of the app with the top area of the view delegated to the Britizen logo and and a link to the settings screen. The settings button is configured to be a minimum of 44 x 44 pixels wider as per the Apple iOS Human Interface Guidelines (2017) to account for the user’s finger size when using the touch screen to provide a more responsive interface. The settings and send buttons are also situated on the right edge of the screen to make it easier for the predominantly right-handed users to access. The feed itself is very similar to other social networking sites such as Tumblr, Instagram and Facebook. Providing users with a timeline of posts and events that have taken place on the platform in the form of images and text. This design view also highlights the use of \u00a0embedded sponsored advertising in the feed as a potential revenue stream for Britizen’s monetisation as outlined in Sue Breezes post<\/a> on the Britizen Revenue Model. Users can also \u00a0post to the their personalised feed using the controls at bottom of the screen that were modelled on Facebook messenger so users would already have a \u00a0good understanding of the universal controls and icons used to post text, images and attachments such as PDFs, for example if they wanted to post their CV. \u00a0At the bottom edge of the view, users can navigate the app using the segmented tabulated view control for the “feed”, “groups” and “Score” sections. This type of design is extremely pervasive within\u00a0apps and should seem simple and intuitive to the user.<\/p>\n

Figure 7. Main Screen\u00a0–\u00a0Groups
\n\"Screen<\/p>\n

This screen displays some of various groups that are available to join on Britizen. Due to limited real estate of the screen size of iPhone7 and smaller mobile devices when compared to tablets and desktop, this screen example previews \u00a0a maximum of 4 groups in any given instance. Each group is\u00a0designated by a “B” shaped group icon, this icon was created using an image clipping mask in a similar way to how other social networking sites such as Facebook would use a circle mask. The “B” denotes the Britizen’s brand, as one of the initially outlined design focuses, was to keep a consistent British theme and brand recognition. The actual “B” used was taken from Luis Cayola’s Britizen logo design. Users are also presented with the name of each group as well as the number of current members and a button underneath that allows them to join. By selecting the group icon or group name the user will be forwarded to that groups individual page. Users can also explore\u00a0further Britizen groups as the white area of the view is scrollable. \u00a0The ‘Manage groups’ button will direct the user to a group management page where the user can edit\u00a0their currently joined groups. As well as this the user can also create a new group denoted by the large plus symbol icon which will forward them to a group creation page. Towards the bottom of the screen the user can also perform a textual search for relevant groups that may interest them, which will be updated in the central white scrollable groups area.<\/p>\n

Figure 8. Main Screen\u00a0–\u00a0Scores
\n\"Screen<\/p>\n

The tabulated score view is essentially a \u00a0user accessible version of the welcome screen\u00a0(see figure. 5 for more information). The main difference being the colour scheme has been altered to be consistent with the style of the rest of the tabulated views by reversing the blue and white colouring. The only other difference is you are now referred to via your full name in a more serious and formal manner, this is to highlight the scores more official nature of your score when selected within the main screen.<\/p>\n

Figure 9.\u00a0Settings Screen
\n\"Screen<\/p>\n

The settings screen which is accessible from the main tabulated view screens allows the user to configure their account, email and passwords settings as well as log out of the app. The user can also delete their account which will seamlessly remove any of their data we have stored on our records this is future proofing the app as the UK government is currently considering new laws and sanctions on the storage and control of personal data. This allows the users greater control over the information that is stored about them. The user can also configure the assistive options originally presented on landing screen (figure 1).<\/p>\n

REFERENCES<\/p>\n

Apple, 2017. Apple iOS Human Interface Guidelines. [Online] Available at: https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/visual-design\/typography\/ [Accessed 24 April 2017].<\/p>\n

Iubuenda, 2016. Iubenda Blog. [Online] Available at: http:\/\/www.iubenda.com\/blog\/privacy-policy-for-ios-apps\/ [Accessed 24 April 2017].<\/p>\n

Jetscram, 2014. Social Media User Statistics & Age Demographics for 2014. <\/em>[Online]
\nAvailable at: http:\/\/jetscram.com\/blog\/industry-news\/social-media-user-statistics-and-age-demographics-2014\/<\/u>
\n[Accessed 24 April 2017].<\/p>\n

Mortensen, K., 2013. Maximum Influence: The 12 Universal Laws of Power Persuasion. <\/em>s.l.:AMACOM.<\/p>\n

Ofcom, 2015. Smartphones most Popular way to Browse Internet Ofcom. <\/em>[Online]
\nAvailable at: https:\/\/www.theguardian.com\/technology\/2015\/aug\/06\/smartphones-most-popular-way-to-browse-internet-ofcom<\/u>
\n[Accessed 24 April 2017].<\/p>\n

People, R. N. I. o. B., 2014. Reading Large Print Size. <\/em>[Online]
\nAvailable at: https:\/\/help.rnib.org.uk\/help\/daily-living\/reading\/large-print-size<\/u>
\n[Accessed 24 April 2017].<\/p>\n","protected":false},"excerpt":{"rendered":"

This post describes the design process and the final mock up screens for the Britizen mobile application. We decided to focus mainly\u00a0on the mobile version for the design mockup as smartphones are now the primary method of accessing the web and internet services in the UK, according to industry monitor Ofcom (2015). All images are … Continue reading Mobile and Desktop Responsive Design Mockup<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":2314,"featured_media":244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[74,31,72,71,82,73,75],"class_list":["post-238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-project-map-and-storyboards","tag-assistive-technology","tag-design","tag-mobile","tag-mockup","tag-privacy","tag-responsive","tag-text-to-speech"],"jetpack_featured_media_url":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-content\/uploads\/sites\/195\/2017\/05\/Screen-Shot-2017-05-03-at-22.04.32.png","_links":{"self":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/users\/2314"}],"replies":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":23,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/posts\/238\/revisions\/305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/media\/244"}],"wp:attachment":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/categories?post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/britizen\/wp-json\/wp\/v2\/tags?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}