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 (new users):
If one choose to register it will take him to the "
Terms of Use" and "
Registration" Page:
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 and
manage 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" thread).
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..
Clicking "
post" 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) b
ecause 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) a
nd 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!