Computer based Horizontal prototype
The application developed in the following section, is meant for facebook users and takes care of the news feed manager and the users’ login page. It has a news feeds manager imbedded in facebook and a person the news feeds by a person are filtered according to the users’ needs. The user is first prompted to log into their facebook account and then their news feeds are filtered for them. Once the newsfeed has been filtered, they are arranged for them at the top of the page as shown in the preceding sections.
i. The user is prompted to enter his/her login information
ii. The system checks whether the provided information is correct
iii. If the information is correct, then the user proceeds with account access
iv. However, if the supplied information is invalid, the user is asked to check the provided information
v. If the user fails to enter correct information the system terminates however if the right information is entered the user is able to view his/her newsfeed page
vi. The newsfeed is filtered to conform to the users’ requirements
vii. The user can then be able to organize the events planner page
ENTERING LOGIN INFORMATION
The following code is in Visual basic and is used for preparing the login page
1. Private Sub txtpwd_KeyPress(KeyAscii As Integer)
2. If KeyAscii = vbEnter Then
3. If Len(Trim(txtlogin)) > 0 And Len(Trim(txtpwd)) > 0 Then
4. If CheckPwd(txtlogin, txtpwd) = "ok" Then
5. MsgBox "Password ok"
6. Else
7. MsgBox "Wrong password or Login not found."
8. End If
9. Else
10. MsgBox "Login and password should not be blank"
11. End If
12. End If
13. End Sub
14.
15. Private Function CheckPwd(cLogin As String, cPwd As String)
16. 'in my case i will use dao. you probably using ado just convert it
17. Dim rs As Recordset, ret As String
18. Set rs = opendatabase("c:\temp\login.mdb").openrecordset("select * from tbllogin where ucase(trim(logname)) = '" & UCase(Trim(cLogin)) & "'")
19. If rs.RecordCount <> 0 Then
20. If UCase(Trim(rs("pword"))) = UCase(Trim(cPwd)) Then
21. ret = "ok"
22. Else
23. ret = "wrong"
24. End If
25. Else
26. ret = "wrong"
27. End If
28. rs.Close: CheckPwd = ret
29. End Function
FILTERING
Dim TestStrings(2) As String
TestStrings(0) = "Hiphop Crew"
TestStrings(1) = "Backlist producers"
TestStrings(2) = "Ballet Crew"
TestStrings(3) = "Family"
TestStrings(4) = "Backlist Staff"
Dim subStrings() As String
' Returns ["Hiphop Crew "].
subStrings = Filter(TestStrings, " Backlist producers ", True, CompareMethod.Text)
' Returns ["Backlist producers "].
subStrings = Filter(TestStrings, " Ballet Crew ", True, CompareMethod.Binary)
' Returns ["Ballet Crew "].
subStrings = Filter(TestStrings, " Family ", False, CompareMethod.Binary)
subStrings = Filter(TestStrings, " Family ", True, CompareMethod.Text)
' Returns ["Family "].
subStrings = Filter(TestStrings, " Backlist Staff ", True, CompareMethod.Binary)
' Returns ["Backlist Staff "].
subStrings = Filter(TestStrings, "i Backlist Staff ", False, CompareMethod.Binary)
The above code is used to filter the newsfeed from each of the five groups namely:
Hiphop Crew
Backlist producers
Ballet Crew
Family
Backlist Staff
Once the desired group has been chosen an events manager window appears. This helps in reminding the user about upcoming events as shown by the following form produced from visual basic.
EXPLAINING PARTS OF THE PROTOTYPE
The application has a login page, the newsfeed page and the event’s organizer page
Each section of the application has a specific function
The login page helps in authenticating the user of the system and to ensure that only the legitimate users have access into the system.
The newsfeed page is charged with the responsibility of ensuring that only relevant information appears at the top of the user’s page. In this case, the newsfeed page has an additional section which helps the user to filter who views the page and whose information can be seen.
The next section then reminds the user of upcoming events.
When the user clicks on the application, the calendar view allows the user to see which days have appointments.
TESTING THE COMPUTER PROGRAM
Notes
The testers gave good feedback after testing the application and they were both in agreement that the application is very easy to use.
Both of them also commented that it is a very good initiative and that facebook should consider having a similar application in their pages so that users can be able to filter only the information that they need.
This application however has limited functionality since some members of a given group may have not signed up for an account. This will affect the accuracy of the results to be produced.
The calendar did not give a good representation of the design. Therefore the calendar should be replaced with a notification window whereby the users can be reminded of upcoming events.
The filter feature is simple to use and gives the users a good experience
Evaluation
When evaluating the application, there are some issues that were discovered and required some review. The main guidelines that were used during the design included: the user experience/friendliness and the presence of errors in the design. The prototype was then analyzed to test whether it passed or failed the guidelines. During the testing phase, the testers took a lot of time analyzing the events button and the newsfeed page. This was caused by the complexities involved when designing the modules for this part of the application. However, once they were through with this phase of the test, the following observations could be made.
User friendliness
The application was easy to use and all the functionalities were clearly labeled at the top of the page. The prototype was found to be speaking the users’ language and even tech-dummy users could use the application. Once a person had signed up for an account, he/she could easily use the application and have all the relevant news listed on his/her facebook account. Apart from the simplicity of the website, the users could also manage to share information using the application. The application also had a filtering feature which ensured that the users could get only the relevant information for their use. As opposed to the traditional facebook features which usually contains a whole junk of information, this prototype included the use of a feature which whereby users could only access relevant information. Therefore, in relation to this form of evaluation, we can state that the prototype met the stated guidelines.
Error
When the application was being tested, the testers did not encounter errors in the implementation phases. The testers were able to evaluate all the modules of the application and were able to give a report on each module. The designers were able to troubleshoot the system during each phase of the implementation stage to ensure that no error was present. The calendar feature used in the events section had some few errors as all the events could not be viewed at the same time. However, this did not affect the functionality of the system. The debugging process of the prototype took the largest amount of time and resources but it was worth the cost. This can be confirmed by the fact that there were no errors that were found in the system and the system could function as it had been propagated earlier on. Therefore as per these guidelines, we can state that the prototype met all the stated guideline.
Comparing prototyping technologies
During the design of this application, two prototyping technologies were used namely:
i. Computer based prototypes
ii. Paper based prototypes
Both prototyping technologies have their advantages and disadvantages and gave a unique experience during their implementation. They were both implemented and the following concerns were recorded.
Paper prototyping saves resources as they allow the designers to test different product interfaces before they start implementing the design or developing the system. This approach also allows the entire team to be involved in the designing process hence enhancing creativity. Users also feel more involved in the design and their ideas can be easily implemented in the system without much worry. The paper prototypes are also very useful especially when the required tools for the designing phase are not yet available and there are lots of drawings involved. This allows the designers to have a visual representation before the development of the application starts. It also helps in enhancing communication in the team, helps in usability and design testing and to achieve a better information architecture.
Paper prototyping makes usability testing very easy and real. It helps the designers to perform some realistic tasks through interactions and several issues discovered at earlier stages. During the prototyping in phase II and III we used three paper prototyping techniques which helped in producing exemplary results for our design. We designed a skeleton and gave an overview of how the login page was to look like, we also gave a representation on how the drop down boxes were to be created and finally managed to show how the calendar would appear in the facebook page to notify the user on different events. The techniques used were compositions, storyboards and a wireframe. The wireframe demonstrated the layout of the page and the interface while the storyboard consisted of a set of images that would appear on the page. The compositions technique implemented in our prototype took care of the visual representations and also helped in showing different interfaces that we intended to include in the facebook page.
Computer based prototyping on the other hand gives an abstract overview of the codes that needs to be implemented. In our case we formulated the computer-based prototypes after preparing the paper prototypes. The paper prototypes usually give the designers a visual overview of how the system will look like. The computer-based prototypes on the other hand help in showing how the codes are to be implemented by the computer being used. In our testing for phase II and III, the following issues were addressed: computer-based prototypes are much slower in implementing but usually offer a more accurate picture of the system once the testing has been done and appropriate debugging done. They are more difficult to test as the codes need to be running and produce the desired results. It is also much difficult to modify this prototype once it has been implemented. This type of prototype contains a stream of codes and whenever a modification is required, it may be difficult to modify the entire codes in order to make the system to conform to the new requirements. This type of prototype also does not illustrate the desired design as seen when using the paper prototypes whereby the user can give an abstract pictorial representation of the design. This type of prototype mainly consists of codes which are best understood by the computer and not giving the users an illustration of how the design will appear. Usually it is a good idea to implement the computer-based prototype after having a clear representation of what they system should look like.
Refinement
The calendar feature used in the design needed refinement. Once the testing phase had been completed, there were several issues that were supposed to be addressed as per the comments issued by the testers. In our design, we used a calendar and the testers recommended the use of a notification window. The calendar though had some functionalities that the notifications window do not have it was better to have the notifications window than having the calendar. The application being developed mainly targets users who do not have a stream of events in their schedule. Therefore using the notification window would lead to a better user experience than using the calendar feature. Using the notification window also ensures that the number of items displayed on the screen are reduced hence leading to a more neat design.
An icon can also be incorporated at the top of the page whereby users will be notified when there is a new upcoming event. A number will appear at the top of the page showing the user that there is a new upcoming event. The user can then click on the notification bar to get more details about the upcoming event.
Event button should be incorporated into the application so as to be able to demonstrate how the filter works. For instance, once the user has chosen a particular group, he/she will be able to choose the upcoming events and let all the events listed on the screen without the need to go an extra mile to open a different window.
The page also needs to be divided into two sections. One half of the page will show all the regular news while the second half of the page will show he filtered information for the newsfeed for a particular group. This is a good initiative as opposed to the first design which only featured a function for showing only the filtered information.
In the earlier version, a calendar was dispalyed. In this new improved version, a notificatin wiondow will appear which shows the events of the month and the details for each of the events.
The application should also include the use of frames and minmize the use of pop up windows since they are usually not pleasing to some users. Whe a user clicks on a given feature, the user can then be directed to a frame on the same page with a list of events whereby he/she can choose from. The top frame should feature the title of the application and the notifications bar while the other two frames features the contents of the application.
The refined application should also feature a sorting button whereby the users can be able to sort out news from the most recent to the earliest news feed. Once the news have been viewed, they should be archived for future reference. This refined version should also include the use of a feature which determines the location and dispalys information only relevant to a given location. The feature should also be able to update the user’s account whenever he/she travels so that the user is not required to manually update the location. The user can be able access information relevant to his location just by enaging the update button. Ths information is then filtered and displayed on the user’s account.
