FYP Project K00121609 March 2017
Blog 14: Discussion Forum
In this blog I will display the resulting "Discussion Forum" for my FYP Project of "Design Your Day Your Way." As I mentioned in blog 13, as I fine-tune the navigation over the next few days I will be adding sub-heading tabs to the existing layout. These would be keywords like those added in search engine optimization, to categorize topics and stimulate conversation. Examples of such keys would be: life management, mindfulness, health etc. This forum is a large part of my project that uses multimedia and user interaction in the heading (on navigation diagram) of "Life Management, Media and Society." This is a minimalist design in the calming lilac colors of the website. (I will include an updated moodboard of how my ideas and actions have developed since the presentation step in an additional blog.) The following is the domain name I created for the forum:
Next are the screen-shots of aspects of the discussion forum and its functionality:
Screen 1:
This is the opening page the user sees on internet search. I have created a clean, clear minimalist screen as when content and conversations are added to discussion forums they can become quite cluttered looking. Here this modern design approach could act as a calm backdrop in information added.
Screen 1:
This is the opening page the user sees on internet search. I have created a clean, clear minimalist screen as when content and conversations are added to discussion forums they can become quite cluttered looking. Here this modern design approach could act as a calm backdrop in information added.
Screen 2:
This is the page on-click of "news" in the category section above. As you can see there are not any news discussion items added as yet. It has titles of: subject, author, replies and last post. The areas of "General" and "Moderators Only" show this same screen layout and functioning.
While in this sub-category of "News," the user can click on its main title of 'Categories' to return to the home page. They can also access other aspects of the site using the tabs at top of screen such as: calendar and latest topics.
Screen 3:
Going back to the home page (on-click of main title user is in, i.e. here "Categories") there is an area of the screen shown in this screen-shot that shows current status and actions on the site in "Current Active Users" and previous actions on the site in "Forum Statistics" sections. Here highlighted in blue text are the live links within these areas: "2 users online" in the "Currently Active Users" section and "Members List" and a welcome to newest member, in this case is "sineadb," as clickable live links for more direct information on each of these items.
Screen 4:
As a development from screen 3, this is the resulting screen from on-click of the highlighted link "2 users online." This gives details of: member name, last activity, posts/latest and when joined the discussion forum.
Screen 5:
As a development from screen 3, on-click of "Members List" produces this screen. There is a useful A-Z index bar on top which would be useful for any search for other members.
Screen 6:
As a development from screen 3, this is on-click of new member this is the profile screen that is shown. There are options in albums for adding photos, contact information general and account information. In the account information, there are options for: a search for posts and topics by this member as they are added.
Screen 7:
There are two images here for screen 7. The first is the page on-click of the "control panel" for a logged on user. The second image is a partial screen-shot to show the detail clearly of the relevant page part. As you can see, there are plenty options for the user to add the details they wish to use and to customize their area of the website like for "user title."
Screen 7_Image 1:
Screen 7_Image 2:
Screen 8:
As a development of screen 7, on-click of the preferences tab will bring up the following screen. Again I have taken an overall screenshot of the page and a partial screen-shot to show the detail. This gives the user the option to "Update" their preferences.
Screen 8_Image 1:
Screen 8_Image 2:
Screen 9:
This next screen-shot is the event reminder screen. The user has options of adding: an event, event date, event poster and a reminder date.
Screen 10:
Here is the search page in two screen-shots; the first the overall page and the section a partial screen-shot of the main information area on screen. The user can search by: keyword and username as well as conducting an advanced search. They can search by: members contributions, relevancy ascending or descending, by date and by topic or post.
Screen 10_Image 1:
Screen 10_Image 2:
Screen 11:
The next screen-shot is of when click on "Calendar" tab, this calendar is displayed. This has been CSS designed in consistency with the other pages. This is the "Monthly View."
On the far right of screen above the "Saturday" label is "Add an Event." This next is a close-up screen-shot of this functioning element. Here, as you can see is a drop-down list of options for a: single, all day, ranged, recurring event.
a. On-click of a "Single, All Day Event" this next is a close-up shot of information displayed and the options contained.
b. On-click of a "Ranged Event" the following is the screen, similar to the above, but with a start and end date and time.
c. On-click of a "Recurring Event," there are the extra options to select: daily, weekly, monthly and yearly and time.
Screen 12:
This is a drop-down list when "Calendar Mode" is selected on the top-left of the calendar.
a. Weekly View:
b. Monthly View:
Screen 13:
This is the top of the screen for the "Chat" area of the website. Users can have online chats on topics in this chat-room area of the website. This is quite a good example of user interaction within the designed website.
Screen 14:
At this point I log out of the forum and then click on logon to show this process. This is the create account form and the next is the logon form. Both are close-up screenshots of these relevant areas.
a. Create account form which asks for minimal information for maximum effect.
b. The logon form which is clear and assistive of the user with several options including: forgot your password, checkbox for automatic logon and create an account.
No comments:
Post a Comment