Here we go.. Im having a hard time trying to figure out how I will translate the "Poll" thread (or if its still necessary to include it in the application port) but while im yet to make I might aswell post those I have already finished.
Please take note that the designs/colors/icons here are not final and for testing purposes only
, I paid attention to the UI flow, Usability
and User Experience
of the application as its important to do so being the application a ported "mobile version" of a fully working "forum website".
First up.. the Springboard
where we can see the Philmusic Application Icon
Next after we initiate the application is the Login Screen
, we have 2 options here to either login
(existing users) or register
" and "Registration
will be ask to accept the terms
first before one will be able to continue and clicking accept will move to the main registration page:
Clicking submit will send the information to the server:
A popup message
will inform the user that his/her registration is successful and a verification email is sent to complete the registration.. (one needs to click that link first to verify the registration before he/she can use his account)..
If one is an existing user
he can immediately log into the application using his credentials..
Logging in will take him immediately into the Main Menu:
The main menu shows the section of the main philmusic board
, it also shows new personal messages (or unread ones), and will appear as a red badge in the segmented control on the toolbar below
.. it will also show a message if you have received or unread messages available:
Pressing the "messages" section of the segmented control will bring you to your "personal messages" screen
You can read, reply, delete
your messages in this area..
You can edit or "swipe to delete
" messages in each field, you can also use the standard "pull down to refresh
" to check for new incoming messages..
The third section of the segmented control will be your "Profile Page"
.. now im still thinking if we are going to give the users the feature to edit his profile here or will require him to just do it in the main website.. altho I think it is best have it as "read only" for now as I think most of the Philmusic users will be acquainted with the website first before using the mobile application.. thus will already have his profile posted even before he can edit or do it in the mobile app. (altho we can still add it, will still depend).
Clicking back the menu we can start browsing the main forum, say by clicking the "Anything Goes
We will see the sections under Anything Goes, and the color of the title represents it if you have visited it already, if its gray it means there are no recent activity, if its in dark orange it means there's new posts and new threads available, checking for updates will be by using the same gesture of "Pull down to refresh
This will refresh the whole Anything Goes section and will fetch new updates from the serves, all texts will turn into dark orange if the system detects multiple activities in all the sections.
Clicking a section will take us into its main page that will display all available thread/topics related to that section (like the Hobbies Beta Section).. we can also update it by using the pull down to refresh.. to fetch new replies, new threads, locked threads or deleted threads.
The main thread page under the Anything Goes section will display the "newest" threads and the threads with new replies.. a sub header will display the "paging" of the threads section, here we see "1/11
" means we ware in page 1 with eleven total pages.. scrolling up will automatically load the next page to show the succeeding threads until the last page.
You can also do a search of a specific thread
you want by using the search bar in the list.. this will fetch the keyword from the server or if its already loaded (if you browsed all the pages thus loading all of it) it will show immediately.. (example the "Digital Painting
You can also click the thread immediately in the search results..
Inside the Digital Painting thread will display the replies from old to new (just like the main page), but im thinking about adding a "settings
" in the menu page to give users an option
to display thread replies "the other way around" or from "newer to older"
this will make the user see the latest reply on that specific thread immediately
, unlike when we use the "older to newer" display option we still need to "scroll down" to load all the pages until we see the newest reply.. this is a usability hiccup as mobile users wanted "efficiency" when using the Philmusic Mobile App.. they will want to "see immediately" all updates thus we need to give it to them because most of those who will opt to use a mobile version of the forum are those people "on the go"
thus they dont have time to spend scrolling up and down
just to read the new post and reply to them..
Just like the sub thread section we can view the succeeding pages by scrolling down to automatically load the next page of replies
(older to newer or newer to older will depend on the user).. we can see here after loading the next page we scroll up the sub header pagination will show "2/11
" means we are already viewing the 2nd page
of the thread..
Threads with 5 or more replies will show the replies in "preview
" mode to maximize list space, you will see a "progressive disclosure
" control (down arrow) on each reply which means it can be "collapsed
" to see/read the whole reply.. the user can click the "chevron/arrow
" (down arrow) to collapse that specific reply.. then you can also click it again to close it..
Replying will be simple, you can click the reply icon
in the toolbar anywhere in any page you are since every new reply will automatically be displayed on the last page (older to newer) or the first page (newer to older).. clicking the "reply to thread
" will be the usual reply but clicking the "reply with quote
" will bring you back to the list so you could click the specific reply you wanted to quote..
You will notice that once you select a specific reply to quote in the list it will automatically be added on your reply page
After the reply is sent to the server you will automatically be brought to the last page to see your reply
(older to newer) or the first page
(newer to older).. this will also be initially displayed in "preview" mode to save space and can be read in whole by collapsing it.. (clicking the progressive disclosure arrow).
Now on creating a new thread
You can click the "new thread
" icon in the toolbar anywhere or anypage you are in the section.. this will pop up the action sheet
that will display the options of either creating a "new topic
" or "new poll
" or to cancel
(unless you accidentally pressed the new thread icon).. creating a "new topic" will bring you to the standard create topic page
" will send the new topic request to the main server to post it.. after that it will display immediately on the first page
(under stickies) of the threads section.
Clicking the new created topic/thread
will show you the author's reply immediately (not a preview) because there is still plenty of space to show it
.. unlike when replies started to swarm to a certain number the application will automatically turn all replies into "preview mode"
where you need to collapse it by clicking the progressive disclosure button (to save space ofcourse).. but until there is significant replies added
the thread will display the replies (up to the 5th reply depending on the size of text) in its "whole
" not "preview
" version (without the progressive disclosures).
You can also modify
your thread by clicking the "Edit
" button on the navigation/header bar (above) the "Edit" feature will only be available to users who are the "creators" of the thread
, those who are in read only will not see the edit button..
Clicking the edit button will give the users option to modify the title
or add text, details
into the thread (like adding a photo link)..
im also thinking of adding options here to "lock
" your page or to "delete
" it.. lets say in the classifieds section where in the event that your item is already sold you can edit your thread to either lock or delete it.. but this will depend on the decision of the moderators.. we can add the feature later..
After editing your thread (pasting an image link) you can click the "save
" button to request the server to update the existing thread with your new details added..
The photo link will immediately display the image you posted
(hosted on another site like Facebook or Photobucket).. now this is what I want to make sure if we are going to have our own servers
I can add an option to each user to use their phone's "built in camera" to take photos
of anything (a guitar for example) and post it immediately in his thread
or reply.. the application will automatically scale the photo into standard HVGA (640x480px) to optimized it "display" and "file-size" wise.. but unless we settle wether we will have that resource I will for now make the adding of photos solely "host-based" since we can just add the feature later.. or in version 1.1 of the app
so far this is all I have for now.. im still about the finish the "New Poll" pages.. altho I need feedbacks from you if the Poll is a worthy feature we have to include in the Port? as I dont see the need for a user to post a Poll "on the go".. but I might be wrong..
also another feature I will add soon is another section on the segmented control titled "new updates
" which will show all updates/activities on the threads, discussions and polls you are in
.. this will help you see/monitor immediately all replies to your thread
.. all replies to threads you are watching
etc.. atleast you wont need to browse into the sections just to check updates on your activity..
I also forgot the "Recent Posts
" is a very usable section
.. im thinking of where to put it.. I can add it up on the main menu when I post my next updated mock ups..
this is a mock up in progress
.. this can change anytime
depending on the feedback we will have, but "usability
" and "user experience
" wise? this is my recommendation
if ever we are going to push through porting Philmusic into a mobile app.. this is just for the iOS platform
.. if ever we are really serious with it we will also need to do the same for the Android platform
too (for android users).. which is a totally different user experience
.. and will require another round of work
will post updates soon!