{"id":592,"date":"2023-02-28T15:35:17","date_gmt":"2023-02-28T15:35:17","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/?page_id=592"},"modified":"2023-02-28T15:53:29","modified_gmt":"2023-02-28T15:53:29","slug":"user-interface","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/software-design-and-development\/week-6\/user-interface\/","title":{"rendered":"User interface"},"content":{"rendered":"\n

The User Interface or UI is how the end user will interact with your program.<\/p>\n\n\n\n

The design should include a mock-up of what a user will see when using the system.<\/p>\n\n\n\n

For a program that uses graphics this mock-up can be anything from a wireframe model that describes what each section of the screen contains and controls through to a simulated screenshot showing how the final program will look.<\/p>\n\n\n\n

For text-based programs the design should list all the text that a user will see including validation errors and any output.<\/p>\n\n\n\n

When showing output that is dependent on the user\u2019s input you can either use placeholder markers or example data. But it needs to be clearly marked as such.<\/p>\n\n\n\n

Graphical UI example<\/h2>\n\n\n\n
\"Example
Example graphical user interface<\/figcaption><\/figure><\/div>\n\n\n\n

Text UI example<\/h2>\n\n\n\n

Inputs and validation prompts<\/strong><\/p>\n\n\n\n

Please enter a length between 1 and 999:<\/p>\n\n\n\n

Sorry, that is not a valid length.<\/p>\n\n\n\n

Please enter a breadth between 1 and 999:<\/p>\n\n\n\n

Sorry, that is not a valid breadth.<\/p>\n\n\n\n

Outputs<\/strong><\/p>\n\n\n\n

The area of a rectangle with length <length> and breadth <breadth> is <area><\/p>\n\n\n\n

Note: <length> and\u00a0<breadth>\u00a0will be replaced by the values entered by the user, and\u00a0<area><\/em> will be replaced by the output of the calculation.<\/em><\/p>\n\n\n\n

Next: Testing plan<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The User Interface or UI is how the end user will interact with your program. The design should include a mock-up of what a user will see when using the system. For a program that uses graphics this mock-up can be anything from a wireframe model that describes what each section of the screen contains… Continue reading User interface<\/span><\/a><\/p>\n","protected":false},"author":5710,"featured_media":0,"parent":24,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-592","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/users\/5710"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/comments?post=592"}],"version-history":[{"count":4,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/592\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/592\/revisions\/607"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/24"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/media?parent=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}