{"id":147,"date":"2017-04-25T19:08:28","date_gmt":"2017-04-25T18:08:28","guid":{"rendered":"http:\/\/generic.wordpress.soton.ac.uk\/gapapp\/?p=147"},"modified":"2017-04-25T19:08:28","modified_gmt":"2017-04-25T18:08:28","slug":"mockups-and-prototypes","status":"publish","type":"post","link":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/2017\/04\/25\/mockups-and-prototypes\/","title":{"rendered":"Mockups and Prototypes"},"content":{"rendered":"

App product teams need\u00a0mockups to present their vision and views of the final product and that is why here, in NaviGap, we use top tools to present best UI solutions.<\/p>\n

In this post, we will present our mobile screen mockups to show the basic functions of our outlined scope.<\/p>\n

Why prototype<\/strong><\/p>\n

No secret, that there is no perfect User Interface which will be explicit, intuitive and efficient for all users. However, close to perfect is possible and achievable with countless efforts, many hours of work and constant improvement. Thinking and interacting with your app just like your user is the key.\u00a0A prototype is not a final product, it is the field for improvement and work. It starts with simple sketches and gets augmented by adding features, links, interactions, design improvements\u00a0on its way to perfection. Prototypes allow\u00a0prototypes allow us to test the feasibility and usability of our designs before we actually begin writing code<\/a>. They allow to actually test and play with various user interactions scenarios.<\/p>\n

Imagine<\/strong><\/p>\n

Sketching an app helps to ‘feel’ the actual thing and maximise\u00a0ideas if only on the paper. Various techniques from pencil sketches to post-it notes dashboard can be used. We used a simple sketch to get the whole picture and then moved to available prototype tools to implement click-throughs interaction.<\/p>\n

\"mock\"<\/p>\n

Figure 1. A sketch of what we wanted<\/p>\n

Click-Throughs<\/strong><\/p>\n

Then, we used JustinMind software to build our prototype and show our user interactions with it.<\/p>\n

Here is the basic interaction map:<\/p>\n

\"Picture1\"<\/p>\n

Figure 2. Interaction map<\/p>\n

Figures 3-6 show the initial set of Navigap screens simulated on iOS. Interactions are listed according to user action and marked with blue circles.<\/p>\n

\u00a0 \u00a0\"Picture2\"<\/p>\n

Figure 3. ‘Main_screen_feed’. Main screen with latest expert feed<\/p>\n

Interactions:<\/p>\n

4\u00a0on Click:<\/strong>\u00a0\u00a0 goes to ‘Q&A_with_experts’ with effect: pop<\/p>\n

5<\/strong>\u00a0on Toggle:<\/strong>\u00a0\u00a0 goes to ‘Location_on_map’<\/p>\n

6<\/strong>\u00a0on Click:<\/strong>\u00a0\u00a0 goes to ‘Expert_story’<\/p>\n

7 on Click:<\/strong>\u00a0\u00a0<\/strong> goes to ‘Expert_story’<\/p>\n

8\u00a0on Toggle:\u00a0\u00a0 <\/strong>goes to ‘Location_on_map’<\/p>\n

9\u00a0on Click:\u00a0\u00a0 <\/strong>goes to ‘Q&A_with_experts’ with effect: pop<\/p>\n

\"Picture4\"<\/p>\n

Figure 4.\u00a0Q&A_with_experts. Interaction with expert users<\/p>\n

Interactions:<\/p>\n

2<\/strong>\u00a0on Click:<\/strong>\u00a0\u00a0 goes to ‘Main_screen_feed’<\/p>\n

 <\/p>\n

\"Picture5\"<\/p>\n

Figure 5. Expert_story. Extended travel story of an expert user<\/p>\n

Interactions:<\/p>\n

1 on Click:<\/strong>\u00a0 \u00a0goes to ‘Main_screen_feed’<\/p>\n

\"Picture3\"<\/p>\n

Figure 5. Location_on_map. Extended\u00a0map of chosen destination<\/p>\n

Interactions:<\/p>\n

1 on Click:<\/strong>\u00a0\u00a0<\/strong> goes to ‘Main_screen_feed’<\/p>\n

The interactive simulation can be accessed via the link: https:\/\/www.justinmind.com\/usernote\/tests\/25458829\/25462335\/25465092\/index.html<\/a><\/p>\n

Final thoughts<\/strong><\/p>\n

We understand that our highest\u00a0priority\u00a0is the user and making their experience pleasant and fun in lines with our goals is a challenge. However, using different approaches, tools and techniques to reach the ultimate App prototype is something we take seriously within our team.<\/p>\n","protected":false},"excerpt":{"rendered":"

App product teams need\u00a0mockups to present their vision and views of the final product and that is why here, in NaviGap, we use top tools to present best UI solutions. In this post, we will present our mobile screen mockups to show the basic functions of our outlined scope. Why prototype No secret, that there […]<\/p>\n","protected":false},"author":2298,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12,25,1],"tags":[42,41,40],"class_list":["post-147","post","type-post","status-publish","format-standard","hentry","category-app","category-ui","category-uncategorised","tag-mockups","tag-prototype","tag-ui"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/posts\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/users\/2298"}],"replies":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":7,"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/posts\/147\/revisions\/166"}],"wp:attachment":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/gapapp\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}