DIGITAL DESIGN. Robert Shefras BA(Hons) Design. Leeds Metropolitan University.

Transcription

1 DIGITAL DESIGN Robert Shefras BA(Hons) Design Leeds Metropolitan University.

2 CONTENT 1. Statement of Intent 2. Critique of websites (X-stream critique) 3. Critique of Websites (X-stream critique part 2) 4. Critique of Websites (Facebook non-vle critique 5. User Surveys 6. System Trees (Research and Development) 7. System Trees (Research and Development) 8. System Tree: Final 9. Graphics User Interface (GUI Research ) 10. Graphics User Interface (GUI Development) 11. Graphics User Interface (Colour Scheme) 12. Final Design (Presentation) 13 Final Design (Detailed Explanation) 14 S.W.O.T Evaluation

3 1. STATEMENT OF INTENT This project has been designated to design a virtual learning environment. The interface will allow new users to navigate the website without being intimidated by the layout and allow experienced users to feel that it is not spoon feeding them information, making signing on less of a drag, the website will also be very visually appealing, making loging on that much more enjoyable. It will also have minimal information that is not relative for the user, this will give it a clean and concise feel about it, also, it will be customisable for a feeling of complete control over YOUR learning, this will include a customisable home page, news feedorders, if any, colour scheme and arrangements of tabs and buttons. Advertisements will be only located in a clear fashion, de-cluttering the page so important and useful information is not overlooked. Chat functions will be enabled so you can keep contact with friends and course mates. Forum pages will be assigned, so a stronger community based around the website can be formed, this will also help with technical support.

4 2. CRITIQUE OF WEBSITES X-STREAM CRITIQUE PART 1 CONTENT - X-stream home page is not that relevant - Everything you may need for courses is on x-stream - Navigating to some areas is complicated and long winded - X-stream varies on different operating system making it confusing some times - There is a lot of content irrelevant to us, e.g. advertisements this can lead to confusion and intimidation - Difficult to get used to finding content as the website is changing a lot ERRORS - If you don t log out properly it wont log you back in - Some links are dead - Waiting time to recover password - Sometimes crashes - When downloading files, it leaves the page blank, (have to refresh to download) - If you press back whilst on the homepage it logs you out (not able to automatically keep you signed in like many other websites out there today) CUSTOMISATION - Cant customise some new feeds FIRST IMPRESSIONS - Lots of buttons / writing - Cant customise colours - Busy - You can minimize important information - Nice colour scheme - Some frames cant be customised but this option is not available to some - Could be brighter - Not appealing NETWORKING USERS - Not all addresses show up! - Cant people who are on your contact list FEEDBACK - No info on file downloads - Doesn t work on mobile phones - Hard to find content - Requires you to log in a lot - To much information at first glance

5 3. CRITIQUE OF WEBSITES X-STREAM CRITIQUE PART 2 HELP FUNCTIONS - No obvious links to help areas - Top of page help button LEARN ABILITY - Site requires a bit of teaching to use - The impression functions given is misleading - You can contact tutors VISUAL CLARITY - No search bar on , only A-Z SECURITY - A lot of signing in, potentially good - No pop ups - Far to much stuff on home screen - Logs out after 15 mins - Colour scheme is calming - sometimes remembers your password NAVIGATION/LINKS - Vista operating system has different navigation - Have to log in again to look at modules - Long unnecessary titles SATISFACTION/PLEASURE - Annoying amount of topics - Isn t pleasurable to visit - files download with odd names SEARCH ABILITY - No internal search engine LAYOUT - To much on one page - Searching for addresses is bad, no proper address book - Lots of boxes with different info - Confusing - timetable and course searching is awkward

6 4. CRITIQUE OF WEBSITES CRITIQUE OF FACEBOOK VISABILITY OF SYSTEM STATUS - Facebook as small titles and icons that allows the user to find out exactly what there doing, each page within face is also good to get to, however, there is an abscene of titles on some pages RECOGNITION RATHER THAN RECALL -All options are retrievable no matter what page you are on, apart from user links and personal info on each users page, which would be impossible to make availiable on every HELP AND -Help is the rest with all MATCH BETWEEN SYSTEM AND REAL WORLD -The website is very user language friendly, coming in a variety of languages from around the world speaking real world talk instead of computer talk FLEXIBILTY AND EFFICIENCY USE - Very user friendly, simple navigation tools that seem very professional. DOCUMENTATION clearly listed with of the options, along documentions. USER CONTROL AND FREEDOM -Facebook as an amazing escape functionality that is the same for each page, then Home and profile buttons, or, for more frequent users, you can reselect your options from any page, using the clever top bar. CONSISTENCY AND STANDARDS - Since using Facebook I have come across no consistency or standards problems, the website is quite fluid in terms of speach, with no annomalys that are noticeable AESTHETICS AND MINIMALIST DESIGN -Information is too the point and doesnt divulge from the current situation you are in. ERROR PREVENTION -Every error message ive come across tells you the the error clearly HELP USERS DIAGNOSE AND RECOVER -Most error messages are custom facebook error messages, which usually have solutions within them

7 5. USER SURVERYS What Are User Surveys? User surveys are a way of collecting data that can be transferred to the creation of the website, getting rid of as many bugs or anomaly s that have been consistently brought up in predecessors. These are a few User Surveys that can be done: -Private camera conversations - Co Discovery - Thinking Aloud Protocols -Focus Groups - User Workshops - Incident Diaries - Questionnaires - Observations What Surveys Should I Do? Observations - This type of research is very effective at seeing how a user interacts with a product, this allows a great amount of data to be handed over to the researcher because they can analyse how people interact with whatever they are researching, but can be bias and compromised if the user knows they are being monitored. Private Camera Conversations - This involves people videoing themselves, this can be beneficial as people would feel more comfortable doing this, as they could potentially do it in there own home, but like most types of research methods, it can be contaminated as they fully know that they are taking part of a study, potentially causing bias opinions Focus Groups - These brainstorming sessions are good as they allow users to bounce of each other, this allows them to get more stuck in to the topic at hand, usually dictated by the researcher, this information can be therefore contaminated, but, if the researcher doesn t insinuate, the study should be a success. The focus groups can be dominated more by people who are more willingly to speak, creating bias information, and it does take more time. - Interviews -Semantic Differentials

8 6. SYSTEM TREES System trees are a great way of planning your website out, before you even start designing the aesthetics and look of it. It helps gather everything you think you would require, enabling an easy list of objectives to implement into your actual design of the website. System trees work by show showing all possible connections. These are the types of System Trees Straight Linear Sequence Linear Sequence with supporting digressions More complex hierachy Simple huband spoke structure Web like structure My system tree is a combination of Linear Sequence with supporting digression and a Complex Hierachy system.

9 7. SYSTEM TREES Straight Linear Sequences: -This sequence is similar to reading a book, as you cant skip pages, and you must go through the website to get to where you want to bed. Linear Sequence with supporting digressions: - You work yours way down the System tree to get to what you want, but you then need to navigate your way back up, adding a search bar will help. Simple Huband Spoke Structure: -The home page has multiple links, but none of them link up with each other, so you have to go through the homepage to get anywhere. More Complex Hierachy: -This system has a lot of web pages, which are linked to the home page, the user must navigate down the page, and when they want other pages, they must navigate up to other pages Web Based Structure: - This system allows user to go to any page from any previous page, however, this can become confusing.

10 8. SYSTEM TREES: FINAL This is my system tree/ site map, this shows all my connections within the website.

11 9. GRAPHIC USER INTERFACE University of Derby VLE: This is another VLE, this setup is almost identical to X-stream, however, there arent any dead links and it is less cluttered and less distracting, it was very easy to get used to but a bit overwhelming to get to grips with. The sleak setup, visually, is very nice to look at with complementing colours. Navigating through the website was relatively good. X-stream: X-streams GUI is quite clean, but distracting in some areas, probably because of the poor placement of advertisements and the poor layout of important information that would actually benefit the user, the navigation is well planned out though. Facebook: Facebooks setup is VERY clean and concise, this makes logging on almost exciting, and with its simple layout and cool colours, allows you to think clearly whilst navigating through out the website.

12 10. GRAPHIC USER INTERFACE These are a few GUI sketches. Primarily sought out after doing research on the internet, these are the designs that seemed most visually appealing.

13 11. GRAPHIC USER INTERFACE

14 12. FINAL DESIGN This is the final Website design, it fully incorporates most, if not all a VLE needs, Its a simple, easy layout, which precisely presents all it has to offer in a clean fashion. The aesthetics of the GUI are clean, incorporating the use of cool colours, keeping the mind clear, all of this creates a fluid searching and learning expirience All pages can be reached from within each other, this is because the navigation column remains the same on each page, this mean you can access any of the main categories just by selecting it, this is show in the far left image.

15 13. FINAL DESIGN TAB BAR: The tab bars automatically drop down, leading you to options located in the navigation column Home Tab: Options that drop down from this are: - Account Poster Column: This far left column is mainly for advertisements and quick links to a few pages, e.g. Calendar page, usually, the less important information. MyLearning Tab: Options that drop down from this are: - Course & Modules - University & Campus - Files - Library YouLearn Tab: Chat: Options that drop down from this are: -Search -Contacts -Forums The chat panel is a quick and easy way to contact people within your course, or anyone whos using the system, to add contacts you need a YouLearn account name or , and you input these details in the Contact option in the navigation column Help Tab: Navigation Column: Main information Column: This tab sends you to a page with all the Help options on This is an advanced, more detailed way of navigating through the website. This is where all information on the website will be displayed

16 14. Evaluation STRENGTHS The YOULEARN website has many strengths, one for its simple layout, allowing navigation to be very easy, even if its your first time on the website, as well as the fact that you can access any part of the website from any page on the website, its customisable in terms of how you want to position your account layout, and with its sleek, minimalist look, it doesn t feel like a drag to have to use the website day in and day out, it also arranges the advertisement and sets up links between the University concisely and efficiently WEAKNESSES The website contains a lot of information, although navigation is pretty fluid, still requires a few extra clicks of the mouse to arrive at your destination, and although stated in the brief, that it would have customisable colour settings, I have not designed it into the system of the website. OPPORTUNITIES The final proposal was a really big success, and pursuance of this idea wouldn t be out of the question, it has a lot of potential. Over time it also has the opportunity to clean up its system tree and GUI even more, to make it an incredibly fast, fluid website optimised for use. THREATS The graphics of the website are not up to scratch in some areas, but can be made more aesthetically pleasing with a bit more time put into it and the spacing of the website could be dealt with better, e.g. resolution of website. It also could do with more functions inbuilt, gathering all resources into one site.